脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue Router的懒加载路径

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

 更新时间：2018年06月21日 11:05:53   作者：Young Dreamer  
这篇文章主要介绍了Vue Router的懒加载路径的解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下

单页应用产出的入口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的懒加载路径的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Vue3封装自定义指令的操作步骤

    Vue3封装自定义指令的操作步骤

    在 Vue 3 中,封装自定义指令可以帮助你更好地复用一些常见的DOM操作逻辑,自定义指令可以用于处理一些特定的用户交互行为,本文给大家介绍了Vue3封装自定义指令的示例,需要的朋友可以参考下
    2024-11-11
  • ElementPlus 中el-select自定义指令实现触底加载请求options数据的方法

    ElementPlus 中el-select自定义指令实现触底加载请求options数据的方法

    触底时,继续向后端发请求获取下一页的数据,请求回来的数据合并给options,这篇文章主要介绍了ElementPlus 中el-select自定义指令实现触底加载请求options数据的操作方法,需要的朋友可以参考下
    2024-08-08
  • Vue3(ts)使用vee-validate表单校验,自定义全局验证规则说明

    Vue3(ts)使用vee-validate表单校验,自定义全局验证规则说明

    这篇文章主要介绍了Vue3(ts)使用vee-validate表单校验,自定义全局验证规则说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Vue2响应式系统之set和delete

    Vue2响应式系统之set和delete

    这篇文章主要介绍了Vue2响应式系统之set和delete，通过为对象收集依赖，将对象、数组的修改、删除也变成响应式的了，同时为用户提供了和方法，下文详细介绍需要的朋友可以参考一下
    2022-04-04
  • Vuex 使用 v-model 配合 state的方法

    Vuex 使用 v-model 配合 state的方法

    这篇文章主要介绍了Vuex 使用 v-model 配合 state的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • Element树形控件el-tree实现一键全选、反选功能

    Element树形控件el-tree实现一键全选、反选功能

    最近做的项目用到了全选全不选功能,于是就自己动手写了一个,这篇文章主要给大家介绍了关于Element树形控件el-tree实现一键全选、反选功能的相关资料,需要的朋友可以参考下
    2023-10-10
  • 如何解决前端上传Formdata中的file为[object Object]的问题

    如何解决前端上传Formdata中的file为[object Object]的问题

    文件上传是Web开发中常见的功能之一,下面这篇文章主要给大家介绍了关于如何解决前端上传Formdata中的file为[object Object]问题的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-07-07
  • vue移动端实现下拉刷新

    vue移动端实现下拉刷新

    我们通过原理讲解以及代码实例给大家分享了关于VUE实现移动下拉刷新的功能，有的朋友可以跟着学习下。
    2018-04-04
  • vue项目中使用vue-i18n报错的解决方法

    vue项目中使用vue-i18n报错的解决方法

    这篇文章主要给大家介绍了关于vue项目中使用vue-i18n报错的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • 通过vue-cropper选取本地图片自定义裁切图片比例

    通过vue-cropper选取本地图片自定义裁切图片比例

    这篇文章主要介绍了Vue选取本地图片，自定义裁切图片比例 vue-cropper,本文分步骤结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-07-07

最新评论