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 相关文章推荐
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
Aug 19 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
js实现移动端微信页面禁止字体放大
Feb 16 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
详解JS WebSocket断开原因和心跳机制
May 07 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调用Twitter的RSS的实现代码
2010/03/10 PHP
php使用fsockopen函数发送post,get请求获取网页内容的方法
2014/11/15 PHP
JS 创建对象(常见的几种方法)
2008/11/03 Javascript
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue弹窗消息组件的使用方法
2020/09/24 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
Python登录注册验证功能实现
2018/06/18 Python
Django 大文件下载实现过程解析
2019/08/01 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
基于python的BP神经网络及异或实现过程解析
2019/09/30 Python
python获取依赖包和安装依赖包教程
2020/02/13 Python
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
c++工程师面试问题
2013/08/04 面试题
sealed修饰符是干什么的
2012/10/23 面试题
简历的自我评价
2014/02/03 职场文书
户籍证明模板
2014/09/28 职场文书
2016年教师节慰问信
2015/12/01 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis