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


Posted in Javascript onJune 21, 2018

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

Javascript 相关文章推荐
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
zTree插件下拉树使用入门教程
Apr 11 Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
简单实现js浮动框
Dec 13 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
微信小程序实现留言板
Oct 31 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
详解如何使用webpack打包JS
Jun 21 #Javascript
vue自定义一个v-model的实现代码
Jun 21 #Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 #Javascript
浅析Vue 生命周期
Jun 21 #Javascript
vue数组对象排序的实现代码
Jun 20 #Javascript
vue项目实现github在线预览功能
Jun 20 #Javascript
node thread.sleep实现示例
Jun 20 #Javascript
You might like
支付宝服务窗API接口开发php版本
2016/07/20 PHP
php文件管理基本功能简单操作
2017/01/16 PHP
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
javascript常见操作汇总
2014/09/03 Javascript
JavaScript判断前缀、后缀是否是空格的方法
2015/04/15 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
javascript中的数据类型检测方法详解
2019/08/07 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
Python中的ConfigParser模块使用详解
2015/05/04 Python
django中静态文件配置static的方法
2018/05/20 Python
Python-while 计算100以内奇数和的方法
2019/06/11 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
保密协议书范本
2014/04/22 职场文书
环境科学专业求职信
2014/08/04 职场文书
2015教师年度考核评语
2015/03/25 职场文书
中学总务处工作总结
2015/08/12 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
2019各种保证书范文
2019/06/24 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Vue实现下拉加载更多
2021/05/09 Vue.js
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB