路由懒加载性能优化

路由懒加载也可以叫做路由组件懒加载，最常用的是通过import()来实现它。

//route/index.js
{
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }

然后通过Webpack编译打包后，会把每个路由组件的代码分割成一一个js文件，初始化时不会加载这些js文件，只当激活路由组件才会去加载对应的js文件。

我们使用vuecli创建项目时，默认就配置路由懒加载，启动工程，打开网页，打开开发者工具的network发现：

app1.png

可以看到在Home路由的时候，初始化加载了这么多文件，其中我们重点关注app.js为98.2kb
然后我们切换到About路由

app1.png

可以看到，切换到About路由时，又加载了about.js，且size为预取缓存

然后再查看Elements发现：

app1.png

about.js是在浏览器空闲时下载，当切换about路由时才加载about.js

当我们取消路由懒加载

import About from '../views/About.vue'
...
{
    path: '/about',
    name: 'About',
    component: About
  }
...

app1.png

对比发现比懒加载多了几kb，别看只有几kb，当项目越做越大，app.js只会越大，差距也会越大
由此可见路由懒加载是非常有必要的一个性能优化选项。