Vue路由器的懒加载路径的解决方法

　　

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

　　

　　

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

　　

　　

官网给出的异步组件写法:异步组件是一个函数,函数的返回值是一个承诺,只是承诺的解决函数的参数是常规组件的定义本身。

　　 　　 　　const AsyncCom=()=比;的承诺。解决({/*组件定义*/}) 　　 　　

　　

这个对webpack不同的版本来说,用法有点区别:

　　

webpack版本在1 - 2之间,可以使用require.ensure来告诉webpack引入了一个异步模块

　　 　　 　　要求。确保([AYNC_MODULE_PATH],回调,CHUNK_NAME) 　　 　　

其实require.ensure编译后是一个叫_webpack_require_.e的函数,其本身是一个thenable实例,require.ensure的回调放到_webpack_require_.e.then (fn)里面
　　为了满足以上两个条件

　　 　　 　　const AsyncCom=解决=比;要求。确保([],()=比;解决(需要(AYNC_MODULE_PATH)), CHUNK_NAME); 　　webpack>=2的版本可以通过进口()来指定动态引入的模块 　　进口(’。/A.vue ')//返回一个承诺 　　 　　

　　 　　//const=解决=比;要求。确保([],()=比;解决(需要(’。/a.vue ')),“A”); 　　const=()=比;进口(’。/a.vue”) 　　const路由器=new VueRouter ({ 　　路线:[ 　　{路径:“/?组件:一个} 　　] 　　}) 　　 　　

　　

　　

对不同路径进行按需加载,并不一定非得每个路径产出一个块,这个还得按不同的业务和场景进行区分,有时候对于同一个业务下的的小异步模块可以进行合并处理。在webapck版本在2.4时,可以在导入引入的时候提供一个/* webpackChunkName: CHUNK_NAME */注释,来表示chunkname,

　　 　　 　　const=()=比;导入(/* webpackChunkName:“group-a-b-c”*//a.vue。) 　　const B=()=比;导入(/* webpackChunkName:“group-a-b-c”*//b.vue。) 　　const C=()=比;导入(/* webpackChunkName:“group-a-b-c”*//c.vue。)//webpack.conf.js 　　输出:{ 　　……//使用code-split产出的块文件名 　　chunkFilename: utils.assetsPath (js/[chunkname]。[chunkhash] .chunk.js '), 　　…… 　　} 　　 　　

　　

以上所述是小编给大家介绍的Vue路由器的懒加载路径的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

Vue路由器的懒加载路径的解决方法