懒加载 3 种场景
1. Components;
2. Router;
3. Vuex modules.
懒加载通用原理
Webpack 2 后，支持了动态导入： dynamic import。基于该特性，在 Vue 应用程序中，我们便可以使用这种方式，在上述的 3 种场景中，实现它们的懒加载方式。
Lazy load in Vue components
想要异步加载一个 Vue component，是非常容易的。在注册组件时，使用 import 函数即可。
Lazy load in Vue Router
Vue router 本身便支持 lazy-loading ，官方文档也有相应说明：Lazy-loading * vue-router
如果你还在使用旧版本的 vue-router，也可以使用 require() 懒加载一个 vue router，下面是一个完整的示例：
Lazy load a Vuex module
Vuex 有一个 registerModule 方法，允许我们动态创建 Vuex 模块。
配置 chunkFilename
使用 import 函数对 Components、Router、Vuex modules 进行延迟加载后，在 webpack.config.js 中配置 chunkFilename！
再次打包应用程序，你会发现旧的 build.js 文件体积缩小，并且 webpack 将各种依赖及懒加载的单独打包成多个 *.chunk.js。
由于我们在 Vue Router 中做了延迟加载，现在，当访问路由时，只会加载路由中所依赖的组件，而不是一次性将全部脚本加载完。
例如，当我们访问根路由时，根路由依赖 3 个组件，build.js 会根据依赖关系，加载相应的 3 个 chunk.js。
当路由切换时，不会重复加载已加载过的 chunk.js，而是只加载未加载过的 chunk.js。
不管是首屏渲染速度，还是整个项目体积的变化，都有了整体的优化！
