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 相关文章推荐
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
Jan 19 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
Aug 09 Javascript
Vue实现移动端左右滑动效果的方法
Nov 27 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
Feb 03 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 Javascript
vue element table中自定义一些input的验证操作
Jul 18 Javascript
vue使用require.context实现动态注册路由
Dec 25 Vue.js
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配置参数总结
2013/06/14 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php中 $$str 中 "$$" 的详解
2015/07/06 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
实现checkbox全选、反选、取消JavaScript小脚本异常
2014/04/10 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
JQuery的加载和选择器用法简单示例
2019/05/13 jQuery
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
2019/08/12 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
Python实现保证只能运行一个脚本实例
2015/06/24 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
医科大学生的自我评价
2013/12/04 职场文书
主治医师岗位职责
2013/12/10 职场文书
大学毕业感言
2014/01/10 职场文书
上课玩手机检讨书
2014/02/08 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
JavaWeb Servlet实现网页登录功能
2021/07/04 Java/Android