浅谈vue项目优化之页面的按需加载(vue+webpack)


Posted in Javascript onDecember 11, 2017

通过vue写的单页应用时,可能会有很多的路由引入。当打包构建的时候,javascript包会变得非常大,影响加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了。这样会大大提高首屏显示的速度,但是可能其他的页面的速度就会降下来。结合Vue的异步组件和webpackde code splitting feature,轻松实现路由组件的懒加载。

就像图片的懒加载一样,如果客户根本就没有看到那些图片,而我们却在打开页面的时候全部给加载完了,这样会大大的增加请求的时间,降低用户的体验程度。懒加载在很多的网站都有用到,比如淘宝、京东等等这样的购物网站,上面的图片链接等等都很多,如果你把滚轴迅速的往下拉的时候,你可能会看到图片加载的情况。

单页应用也是一样,用户可能没有通过点击跳转到其他的的页面,而是只在主页面进行了停留,那么我们就没有必要把其他页面的资源全部加载过来。如果用户点进去再加载。这样就可以大大提高请求时间,提高用户的体验程度。

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入,改为const定义的方式进行引入。

不进行页面按需加载引入方式:import  home   from '../../common/home.vue'

进行页面按需加载的引入方式:const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))

下面的内容讲解的更为详细

webpack ensure相信大家都听过。有人称它为异步加载,也有人说做代码切割,那这个家伙到底是用来干嘛的?其实说白了,它就是把js模块给独立导出一个.js文件的,然后使用这个模块的时候,webpack会构造script dom元素,由浏览器发起异步请求这个js文件。

场景分析:

比如应用的首页里面有个按钮,点击后可以打开某个地图。打开地图的话就要利用百度地图的js,于是我们不得不在首页中把百度地图的js一起打包进去首页,一个百度地图的js文件是非常大的,假设为1m,于是就造成了我们首页打包的js非常大,用户打开首页的时间就比较长了。

有没有什么好的解决方法呢?

解决1

既然打包成同一个js非常大的话,那么我们完全可以把百度地图js分类出去,利用浏览器的并发请求js文件处理,这样的话,会比加载一个js文件时间小得多。嗯,这也是个不错的方案。为baidumap.js配置一个新的入口就行了,这样就能打包成两个js文件,都插入html即可(如果baidumap.js被多个入口文件引用的话,也可以不用将其设置为入口文件,而且直接利用CommonsChunkPlugin,导出到一个公共模块即可)可以参考我之前文章webpack模块打包

那还有没有更好的解决方案呢?

解决2

当然还是有的!我们细想,百度地图是用户点击了才弹出来的,也就是说,这个功能是可选的。那么解决方案就来了,能不能在用户点击的时候,我在去下载百度地图的js.当然可以。那如何实现用户点击的时候再去下载百度地图的js呢?于是,我们可以写一个按钮的监听器

mapBtn.click(function() {
 //获取 文档head对象
 var head = document.getElementsByTagName('head')[0];
 //构建 <script>
 var script = document.createElement('script');
 //设置src属性
 script.async = true;
 script.src = "http://map.baidu.com/.js"
 //加入到head对象中
 head.appendChild(script);
})

上面的几行代码对大家来说都不难。可以在点击的时候,才加载百度地图,等百度地图加载完成后,在利用百度地图的对象去执行我们的操作。ok,讲到这里webpack.ensure的原理也就讲了一大半了。它就是
把一些js模块给独立出一个个js文件,然后需要用到的时候,在创建一个script对象,加入到document.head对象中即可,浏览器会自动帮我们发起请求,去请求这个js文件,在写个回调,去定义得到这个js文件后,需要做什么业务逻辑操作。

ok,那么我们就利用webpack的api去帮我们完成这样一件事情。点击后才进行异步加载百度地图js,上面的click加载js时我们自己写的,webpack可以轻松帮我们搞定这样的事情,而不用我们手写

mapBtn.click(function() {
 require.ensure([], function() {
  var baidumap = require('./baidumap.js') //baidumap.js放在我们当前目录下
 })
})

搞定!当然还是分析一下。require.ensure这个函数是一个代码分离的分割线,表示 回调里面的require是我们想要进行分割出去的,即require('./baidumap.js'),把baidumap.js分割出去,形成一个webpack打包的单独js文件。当然ensure里面也是可以写一些同步的require的,比如

var sync = require('syncdemo.js')  //下面ensure里面也用到
mapBtn.click(function() {
 require.ensure([], function() {
  var baidumap = require('./baidumap.js') //baidumap.js放在我们当前目录下
  var sync = require('syncdemo.js') //这个不会独立出去,因为它已经加载到模块缓存中了
 })
})

也就是说,ensure会把没有使用过的require资源进行独立分成成一个js文件. require.ensure的第一个参数是什么意思呢?[], 其实就是 当前这个 require.ensure所依赖的其他 异步加载的模块。你想啊?如果A 和 B都是异步加载的,B中需要A,那么B下载之前,是不是先要下载A啊?,所以ensure的第一个参数[]是它依赖的异步模块,但是这里需要注意的是,webpack会把参数里面的依赖异步模块和当前的需要分离出去的异步模块给一起打包成同一个js文件,这里可能会出现一个重复打包的问题,假设A 和 B都是异步的, ensure A 中依赖B,ensure B中 依赖A,那么会生成两个文件,都包含A和B模块。 如果想加载A require.ensure([‘A.js'],function) 即可

说完了上面的原理。下面就实践一下

浅谈vue项目优化之页面的按需加载(vue+webpack)

entry.js 依赖三个 js。

  1. Abtn-work.js 是封装了 abtn按钮点击后,才执行的业务逻辑
  2. Bbtn-work.js 是封装了 bbtn按钮点击后,才执行的业务逻辑
  3. util.js 是封装了 entry.js需要利用的工具箱

针对上面的需求,优化方案

假设 Abtn-work.js Bbtn-work.js util.js都是非常大的文件因为 Abtn-work.js Bbtn-work.js 都不是entry.js必须有的,即可能发生的操作,那么我们把他们利用异步加载,当发生的时候再去加载就行了

util.js是entry.js立即马上依赖的工具箱。但是它又非常的大,所以将其配置打包成一个公共模块,利用浏览器的并发加载,加快下载速度。ok,构思完成,开始实现

index.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>index</title>
 </head>
 <body>
  <div id="aBtn">Abtn</div>
  <div id="bBtn">Bbtn</div>
 </body>
</html>

定义了两个buttom

然后看看 entry.js

var util_sync = require('./util-sync.js')
alert(util_sync.data)
document.getElementById("aBtn").onclick = function() {
 require.ensure([], function() {
  var awork = require('./workA-async.js')
  alert(awork.data)
  //异步里面再导入同步模块--实际是使用同步中的模块
  var util1 = require('./util-sync.js')
 })
}
document.getElementById("bBtn").onclick = function() {
 require.ensure([], function() {
  var bwork = require('./workB-async.js')
  alert(bwork.data)
 })
}

可以看到,workA-async.js, workB-async.js 都是点击后才ensure进来的。什么时候加载完成呢?就是 require.ensure() 第二个函数参数,即回调函数,它表示当下载js完成后,发生的因为逻辑

webpack打包后,形成

浅谈vue项目优化之页面的按需加载(vue+webpack)

其实, 1.1… 2.2…就是我们ensure导出来的js文件

我们看看代码是如何加载的执行的,点击打包插入js后的html

浅谈vue项目优化之页面的按需加载(vue+webpack)

可以看到,并没有加载 ensure导出来的 1.1…js 2.2…js

点击 abtn,

浅谈vue项目优化之页面的按需加载(vue+webpack)

发现浏览器下载并加载了 1.1…js

点击 bbtn

浅谈vue项目优化之页面的按需加载(vue+webpack)

发现浏览器下载并加载了 2.2…js

vue项目优化,还有通过减少向服务器请求的次数来减少等待的时间。比如,一个页面的数据包括图片、文字等用户都已经加载完了,然后用户通过点击跳转到了另外一个界面。然后从另外一个界面通过返回又回到了原先的界面。如果没有设置的话,那么原先界面的信息就要重新向服务器请求得到。而通过vue提供的keep-alive可以是页面的已经请求的数据得以保存,减少请求的次数,提高用户的体验程度。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
Express作者TJ告别Node.js奔向Go
Jul 14 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
简单的js表格操作
Sep 24 Javascript
js实现网页定位导航功能
Mar 07 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
javascript 内存模型实例详解
Apr 18 Javascript
Vue实现菜单切换功能
Nov 08 Javascript
微信小程序使用radio显示单选项功能【附源码下载】
Dec 11 #Javascript
详解webpack编译多页面vue项目的配置问题
Dec 11 #Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 #Javascript
浅谈webpack编译vue项目生成的代码探索
Dec 11 #Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 #Javascript
Mac中安装nvm的教程分享
Dec 11 #Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 #jQuery
You might like
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
JavaScript 高级语法介绍
2009/06/15 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
javascript与Python快速排序实例对比
2015/08/10 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
[01:06:07]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS CIS
2014/05/22 DOTA
[47:35]VP vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python del()函数用法
2013/03/24 Python
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
详解Python中的四种队列
2018/05/21 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
PyTorch中Tensor的数据类型和运算的使用
2020/09/03 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
几个MySql的面试题
2013/04/22 面试题
销售副总经理岗位职责
2013/12/11 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
教师思想工作总结2015
2015/05/13 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
前端JavaScript大管家 package.json
2021/11/02 Javascript