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

相关文章

  • 八个一看就觉得很棒的Vue开发技巧分享

    八个一看就觉得很棒的Vue开发技巧分享

    在用Vue开发的这几年里,我学到了很多有用的技巧,所以这篇文章主要给大家分享介绍了八个一看就觉得很棒的Vue开发技巧,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • Vue监听滚动实现锚点定位(双向)示例

    Vue监听滚动实现锚点定位(双向)示例

    今天小编大家分享一篇Vue监听滚动实现锚点定位(双向)示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 富文本编辑器quill.js开发之自定义格式扩展

    富文本编辑器quill.js开发之自定义格式扩展

    这篇文章主要为大家介绍了富文本编辑器quill.js开发之自定义格式扩展,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Ant Design Vue日期组件的时间限制方式

    Ant Design Vue日期组件的时间限制方式

    这篇文章主要介绍了Ant Design Vue日期组件的时间限制方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue 中指令v-bind动态绑定及与v-for结合使用详解

    Vue 中指令v-bind动态绑定及与v-for结合使用详解

    这篇文章主要为大家介绍了Vue 中指令v-bind动态绑定及与v-for结合使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • Vue使用Markdown文档的示例

    Vue使用Markdown文档的示例

    本文主要介绍了Vue使用Markdown文档的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-03-03
  • vue实现可增删查改的成绩单

    vue实现可增删查改的成绩单

    这篇文章主要为大家详细介绍了vue实现可增删查改的成绩单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue可拖拽的瀑布流布局组件实现详解

    vue可拖拽的瀑布流布局组件实现详解

    这篇文章主要为大家介绍了vue的可拖拽的瀑布流布局组件有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • vue使用recorder.js实现录音功能

    vue使用recorder.js实现录音功能

    这篇文章主要为大家详细介绍了vue使用recorder.js实现录音功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • vuejs router history 配置到iis的方法

    vuejs router history 配置到iis的方法

    今天小编就为大家分享一篇vuejs router history 配置到iis的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论