解决路由懒加载, 本地开发时热更新慢

参考连接

问题现象

vue-cli构建的项目. 在不写任何新东西的情况下,回车->保存->触发热更新.

此时 热更新进度卡在: `70% chunk graph`很久.

问题原因

为什么热更新慢: 路由懒加载在文件模块很多的情况下，code splitting构建大量js chunk是性能杀手。

什么是路由懒加载

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

懒加载的3种语法

  // es 的import语法
  [ { path: '/login', component: () => import('@/views/login/index')}]
  // vue的异步组件
  [ { path: '/login', component:  resolve => require(['@/views/login/index', resolve])  }]
  // webpack的require.ensure()
  [ { path: '/login', component: () => r => require.ensure([], () => r(require('@/views/mobile/schoolDetail')), 'SchoolDetail')}]

热更新都做了什么

当你改动代码时,将改动的部分编译打包到内存. <- 这里我不清楚 仅供参考!!!!

懒加载带来的问题

使用懒加载方案,在本地正常开发时, 项目会将所有的组件(无论是否懒加载的组件)统统构建到内存中

但是热更新这其中有BUG,当你是异步组件时,每次热更新都会重新编译所有的异步组件,这也就导致了chunk graph慢的问题,所以解决思路就是 将异步变同步, 这样利用热更新动哪打哪的特性, 每次实现最小的差异化热更新,速度当然就快了.

如何解决

上面我们知道了 热更新慢是因为异步加载, 那我们把它变成同步加载就完事了

具体就是 使用 es 的import语法 和 babel 的 plugins babel-plugin-dynamic-import-node。

参考连接