Vue Router的懒加载路径的解决方法
|
单页应用产出的入口chunk大小随着业务的复杂度线性增加，导致后期加载速度越来越慢。后面就需要对不同路径下的模块进行拆分，打包到相应的chunk下，按需加载，找到chunk的大小、个数和页面加载速度的平衡点。 解决办法.vue模块文件按需加载，其实要做到两件事情：一是标记出这是一个异步组件；二是通知webpack把该组件单独产出为一个chunk。 vue的异步组件官网给出的异步组件写法：异步组件是一个函数，函数的返回值是一个Promise，只是Promise的resolve函数的参数是常规组件的定义本身。 Promise.resolve({ /* component definition */ })
webpack异步模块的引入办法这个对webpack不同的版本来说，用法有点区别： webpack版本在1-2之间，可以使用require.ensure来告诉webpack引入了一个异步模块 其实require.ensure编译后是一个叫_webpack_require_.e的函数，其本身是一个thenable实例，require.ensure的回调放到_webpack_require_.e.then(fn)里面 为了满足以上两个条件 require.ensure([],() => resolve(require(AYNC_MODULE_PATH)),CHUNK_NAME);
webpack>=2的版本可以通过import()来指定动态引入的模块
import('./A.vue') // returns a Promise
Vue Router中的懒加载路径的使用办法 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， 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'),......
}
总结以上所述是小编给大家介绍的Vue Router的懒加载路径的解决方法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |