单页应用产出的入口 chunk 大小随着业务的复杂度线性增加, 导致后期加载速度越来越慢. 后面就需要对不同路径下的模块进行拆分, 打包到相应的 chunk 下, 按需加载, 找到 chunk 的大小, 个数和页面加载速度的平衡点.
解决办法
.vue 模块文件按需加载, 其实要做到两件事情: 一是标记出这是一个异步组件; 二是通知 webpack 把该组件单独产出为一个 chunk.
vue 的异步组件
官网 https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components 给出的异步组件写法: 异步组件是一个函数, 函数的返回值是一个 Promise, 只是 Promise 的 resolve 函数的参数是常规组件的定义本身.
const AsyncCom = () => Promise.resolve({ /* component definition */ })
webpack 异步模块的引入办法
这个对 webpack 不同的版本来说, 用法有点区别:
webpack 版本在 1-2 之间, 可以使用 require.ensure 来告诉 webpack 引入了一个异步模块
require.ensure([AYNC_MODULE_PATH], CALLBACK, CHUNK_NAME)
其实 require.ensure 编译后是一个叫_webpack_require_.e 的函数, 其本身是一个 thenable 实例, require.ensure 的回调放到_webpack_require_.e.then(fn) 里面
为了满足以上两个条件
const AsyncCom = resolve => require.ensure([], () => resolve(require(AYNC_MODULE_PATH)), CHUNK_NAME);
webpack>=2 的版本可以通过 import() 来指定动态引入的模块
import('./A.vue') // returns a Promise
Vue Router 中的懒加载路径的使用办法
- // const A = resolve => require.ensure([], () => resolve(require('./a.vue')), 'A');
- const A = () => import('./a.vue')
- const router = new VueRouter({
- routes: [
- { path: '/a', component: A }
- ]
- })
- Tips
组合多个异步模块到一个 chunk 文件
对不同路径进行按需加载, 并不一定非得每个路径产出一个 chunk, 这个还得按不同的业务和场景进行区分, 有时候对于同一个业务下的的小异步模块可以进行合并处理. 在 webapck 版本 > 2.4 时, 可以在 import 引入的时候提供一个 /* webpackChunkName: CHUNK_NAME*/ 注释, 来表示 chunkname,
- const A = () => import(/* webpackChunkName: "group-a-b-c" */ './a.vue')
- const B = () => import(/* webpackChunkName: "group-a-b-c" */ './b.vue')
- const C = () => import(/* webpackChunkName: "group-a-b-c" */ './c.vue')
- // webpack.conf.js
- output: {
- ......
- // 使用 code-split 产出的 chunk 文件名
- chunkFilename: utils.assetsPath('js/[chunkname].[chunkhash].chunk.js'),
- ......
- }
来源: https://www.cnblogs.com/wmhuang/p/9207208.html