欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue Router的懒加载路径的解决方法

程序员文章站 2022-07-05 08:09:42
单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢。后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk...

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

解决办法

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

vue的异步组件

官网给出的异步组件写法:异步组件是一个函数,函数的返回值是一个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'),
    ......
}

总结

以上所述是小编给大家介绍的vue router的懒加载路径的解决方法,希望对大家有所帮助