Vue.js如何实现路由懒加载浅析


Posted in Javascript onAugust 14, 2017

前言

懒加载也就是延迟加载,不知道大家在工作中有没有发现,当你的SPA(单页应用程序)变得复杂时,打包构建后的Javascript包会变得非常大,以至于严重影响页面的加载时间。幸运的是:vue-router支持WebPack内置的异步模块加载系统。所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载。话不多说了,来一起看看详细的实现过程:

使用

假设你的路由配置是这样的:

import MainPage from './routes/MainPage.vue'
import OtherMassivePage from './routes/OtherMassivePage.vue'

const routes = [
 { path: '/main', component: MainPage },
 { path: '/other', component: OtherMassivePage }
]

简单来说,你可以使用require.ensure来替代import。它能帮你将OtherMassivePage组件以及该组件的所有依赖分割到一个单独的chunk中去。

现在重启你的应用,你会发现并没有什么改变。但,当你打开开发人员工具,选择检查网络,再一次访问/other路径时,你会看到一个新的文件被加载进来。

import MainPage from './routes/MainPage.vue'
const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')))

const routes = [
 { path: '/main', component: MainPage },
 { path: '/other', component: OtherMassivePage }
]

是的,这看起来是有点奇怪,相信我,它并不是那么糟糕。

还有一种方法是将路由对应的组件定义成异步组件。

写起来像这样:

const OtherMassivePage = resolve => {
 // 空数组用来指定该路由组件需要加载的依赖
 require.ensure([], () => {
 resolve(require('./routes/OtherMassivePage.vue'))
 })
}

不过,你最好不要使用这种包裹起来的写法,因为WebPack会使用静态分析来检测和分割块。比较好的做法是,将他们写成一行以减少空间的占用。

按组分块

有时候我们想把某个路由下的所有组件都打包在同个异步 chunk 中。只需要 给 chunk 命名,提供require.ensure第三个参数作为 chunk 的名称:

// 这两条路由被打包在相同的块中,访问任一路由都会延迟加载该路由组件
const OtherMassivePage = r => require.ensure([], () => r(require('./routes/OtherMassivePage.vue')), 'big-pages')
const WeightLossPage = r => require.ensure([], () => r(require('./routes/WeightLossPage.vue')), 'big-pages')

不像许多其他的WebPack任务,这个方法出乎意料的简单,并且能产生意想不到的有用结果。如果你正在维护那些变得臃肿不堪的大型单页应用,我会毫不犹豫的将这种方法推荐给你。

作者:Joshua Bemenderfer

原文地址: lazy-loading-routes

译者:jeneser

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
window.showModalDialog使用手册
Jan 11 Javascript
javascript引导程序
Oct 26 Javascript
Jquery AJAX 框架的使用方法
Nov 03 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
使用jquery.upload.js实现异步上传示例代码
Jul 29 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 #Javascript
一个Js文件函数中调用另一个Js文件函数的方法演示
Aug 14 #Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 #Javascript
jQuery 实时保存页面动态添加的数据的示例
Aug 14 #jQuery
js异步编程小技巧详解
Aug 14 #Javascript
js数字滑动时钟的简单实现(示例讲解)
Aug 14 #Javascript
使用yeoman构建angular应用的方法
Aug 14 #Javascript
You might like
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
php桥接模式应用案例分析
2019/10/23 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
javascript 基础篇4 window对象,DOM
2012/03/14 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
javascript面向对象快速入门实例
2015/01/13 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python的Django框架下管理站点的基本方法
2015/07/17 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python调用.NET库的方法步骤
2019/12/27 Python
python怎么判断模块安装完成
2020/06/19 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
大学军训通讯稿
2014/01/13 职场文书
超市5.1促销活动
2014/01/15 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
婚前协议书范本两则
2014/10/16 职场文书
防汛通知
2015/04/25 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
高中政治教学反思
2016/02/23 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
使用python如何删除同一文件夹下相似的图片
2021/05/07 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript