详解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 相关文章推荐
javascript 选择文件夹对话框(web)
Jul 07 Javascript
9个javascript语法高亮插件 推荐
Jul 18 Javascript
javascript算法学习(直接插入排序)
Apr 12 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
Javascript浅谈之引用类型
Dec 18 Javascript
js实现按钮加背景图片常用方法
Nov 01 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
使用 Node.js 对文本内容分词和关键词抽取
May 27 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
JavaScript 原型与原型链详情
Nov 02 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
destoon找回管理员密码的方法
2014/06/21 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
js比较日期大小的方法
2015/05/12 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
JS计算斐波拉切代码实例
2019/09/12 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
在CentOS上配置Nginx+Gunicorn+Python+Flask环境的教程
2016/06/07 Python
python魔法方法-自定义序列详解
2016/07/21 Python
django模板语法学习之include示例详解
2017/12/17 Python
值得收藏的10道python 面试题
2019/04/15 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
python中使用while循环的实例
2019/08/05 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
python与mysql数据库交互的实现
2020/01/06 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
毕业生精彩的自我评价分享
2013/10/06 职场文书
承办会议欢迎词
2014/01/17 职场文书
临床医师个人自我评价
2014/04/06 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
幼儿教师辞职信
2015/02/27 职场文书
通知怎么写?
2019/04/17 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技