二、开启路由懒加载

上一章内容： 前端优化（一）：开启nginx gzip压缩

本文继上一章，接着前一章，继续讲解如何做前端优化，以vue项目为例。

路由懒加载依赖于webpack的分片，默认情况下，一个项目被webpack打包成一个 index.html, app.js, chunk-vendors.js, app.css，chunk-vendors.css和若干图片。

单页应用下，只有一个index.html。如果要做多页，可进行配置。

app.js对应为项目本身的js，chunk-vendors.js为引入的第三方js。css同理。

这一章我们的主要目的是使用路由懒加载，根据路由切割js和css文件，按需加载，以免文件过大，影响网页加载速度。

我们只需在路由配置的路由数组中，修改组件导入方式即可。

修改前：

routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: About
    }
  ]

修改后：

routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/about",
      name: "about",
      component: () => import(/* webpackChunkName: "about" */ "./views/About.vue")
    }
  ]

其中 webpackChunkName 为webpack打包出来的文件名。
如图：

通过上图我们可以看到，about 组件已经被抽离出单独的文件，这个文件会在路由加载到about页面时加载。