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 相关文章推荐
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
javascript 获取网页标题代码实例
Jan 22 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
详解React中的组件通信问题
Jul 31 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
开发Vue树形组件的示例代码
Dec 21 Javascript
Vue组件化开发思考
Feb 02 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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 session处理的定制
2009/03/16 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
分享20多个很棒的jQuery 文件上传插件或教程
2011/09/04 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
2020/07/22 Javascript
解决vuecli3中img src 的引入问题
2020/08/04 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python中请使用isinstance()判断变量类型
2014/08/25 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python告诉你木马程序的键盘记录原理
2019/02/02 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
python剪切视频与合并视频的实现
2020/03/03 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
银行求职推荐信范文
2013/11/30 职场文书
超市开店计划书
2014/09/15 职场文书
少年雷锋观后感
2015/06/10 职场文书
python 提取html文本的方法
2021/05/20 Python
Python中requests做接口测试的方法
2021/05/30 Python