vue 路由懒加载

1.为什么要使用路由懒加载？

当我们没有做任何优化的时候，webpack会一次性把所有东西打包在一起，页面和组件等会打包成app.js，所有第三方库会打包成chunk-vendors.js，在首屏时一起加载，这时如果打包后体积过大，会影响页面加载速度，出现白屏，用户体验不佳，且里面包含了大量首屏没有使用到的组件。

如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，即每个页面只加载自己需要的组件，页面加载速度会得到较大提升

2.如何实现路由懒加载？

一. 路由动态导入

我们可以看到现在打包完的文件体积都很大，app.js达到109.31kb

我们将路由的引入方式改为动态导入，在router.js，之前是：

import Home from "../components/home/home";

现在改为(路由动态导入还有其他方法，这里只介绍一种）

const Home = () =>

  import("@/components/home/home");

重新打包，打包结果如下,我们可以看到拆分成很多文件，app.js体积变为16.21kb

但是这样拆分太细了，可以看到有的js经过压缩后只要1kb，拆分过细会增加网络请求的数量，所以我们可以对组件进行划分，进行分组打包

二. 分组打包

如下，在/* webpackChunkName: xx */中配置分组：

const Home = () => import(/* webpackChunkName: "home" */ "@/components/home");

const Repos = () =>  import(/* webpackChunkName: "repos" */ "@/components/repos");

可以看到分组后文件数减少了

我们可以在network看到在路由懒加载处理前，后加载时间对比（本地环境，没有经过gzip压缩）：

处理后：

虽然app.js的体积变小，加载速度变快，但是可以看到我们刚刚分组打包而成的js全部加载了，那这样懒加载是不是就没有生效？

其实这是由于vue-cli3之后，默认配置了webpack的预加载，这时候除了路由懒加载需要的当前页面资源，其他资源也会被请求，仍然会耗时下载，但不会被解析。

由于预加载文件比较多，反而阻塞了我们实际需要加载的文件，首页渲染速度变慢，如上图可以看到我们所需到home.js在最后才进行加载。所以我们可以关闭预加载或修改选项。

三. 取消预加载

在vue.config.js中配置：

module.exports = {

  chainWebpack: config => {

    // 移除 prefetch 插件

    config.plugins.delete('prefetch')

    // 或者修改它的选项：

    config.plugin('prefetch').tap(options => {

      options[0].fileBlacklist = options[0].fileBlacklist || []

      options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)

      return options

    })

  }

}