Vue Router的懒加载路径

时间 2019-12-12

标签 vue router 加载路径繁體版

原文原文链接

单页应用产出的入口chunk大小随着业务的复杂度线性增长，致使后期加载速度愈来愈慢。后面就须要对不一样路径下的模块进行拆分，打包到相应的chunk下，按需加载，找到chunk的大小、个数和页面加载速度的平衡点。html

解决办法

.vue模块文件按需加载，其实要作到两件事情：一是标记出这是一个异步组件；二是通知webpack把该组件单独产出为一个chunk。vue

vue的异步组件

官网给出的异步组件写法：异步组件是一个函数，函数的返回值是一个Promise，只是Promise的resolve函数的参数是常规组件的定义自己。webpack

const AsyncCom = () => Promise.resolve({ /* component definition */ })

webpack异步模块的引入办法

这个对webpack不一样的版原本说，用法有点区别：
webpack版本在1-2之间，能够使用require.ensure来告诉webpack引入了一个异步模块web

require.ensure([AYNC_MODULE_PATH],  CALLBACK, CHUNK_NAME)

其实require.ensure编译后是一个叫_webpack_require_.e的函数，其自己是一个thenable实例，require.ensure的回调放到_webpack_require_.e.then(fn)里面
为了知足以上两个条件vue-router

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，async

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'),
        ......
}