详解vue项目首页加载速度优化


Posted in Javascript onOctober 18, 2017

凡是做SPA的项目,特别是移动端的SAP项目,首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉,如果各位有更好的方案,不吝赐教。

1: 针对第三方js库的优化

我们项目里用到的第三方js库主要有:vue, vue-router, vuex, axio, 我们还用到了qiniu。大家知道这些依赖库的js文件都会被一起打包到vender那个js文件里面,如果这些你的第三方依赖库很多,很大的话,那就会导致vender这个文件很大,那首屏加载的速度肯定会被拖慢。

针对这个问题我们的解决方案是,用文档的cdn文件代替,而不用打包到vender里面去。具体的做法是:

1: 在index.html里面引入依赖库js文件

// index.html
<script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>

2: 去掉第三方js的import,因为在第一步已经通过script标签引用进来了。

3: 把第三方库的js文件从打包文件里去掉

这一步的做法就是利用webpack的externals。具体做法就是在 build/webpack.base.conf.js文件的module里面与rules同层加入externals:

详解vue项目首页加载速度优化

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

Javascript 相关文章推荐
跨浏览器的事件对象介绍
Jun 27 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
折叠菜单及选择器的运用
Feb 03 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
Vue动态获取width的方法
Aug 22 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 #Javascript
详解cordova打包成webapp的方法
Oct 18 #Javascript
prototype.js简单实现ajax功能示例
Oct 18 #Javascript
浅谈JS函数节流防抖
Oct 18 #Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 #Javascript
详解Js中的模块化是如何实现的
Oct 18 #Javascript
JS跳转手机站url的若干注意事项
Oct 18 #Javascript
You might like
PHP教程 预定义变量
2009/10/23 PHP
让的PHP代码飞起来的40条小技巧(提升php效率)
2010/04/12 PHP
js sort 二维数组排序的用法小结
2014/01/24 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
解决vue项目F5刷新mounted里的函数不执行问题
2019/11/05 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
javascript实现前端分页效果
2020/06/24 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
Python机器学习之K-Means聚类实现详解
2018/02/22 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python 获取div标签中的文字实例
2018/12/20 Python
详解python-图像处理(映射变换)
2019/03/22 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
提升python处理速度原理及方法实例
2019/12/25 Python
python模块内置属性概念及实例
2021/02/18 Python
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
Sony C++笔试题
2013/03/10 面试题
电气工程师岗位职责
2014/01/01 职场文书
校园文化标语
2014/06/18 职场文书
森林防火宣传标语
2014/06/27 职场文书
元旦趣味活动方案
2014/08/22 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
电视新闻稿
2015/07/17 职场文书
2021年国漫热度排行前十,完美世界上榜,第四是美国动画作品
2022/03/18 国漫
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers