源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2020-10-18 14:20 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:详解vue项目首页加载速度优化
凡是做SPA的项目,特别是移动端的SAP项目,首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉,如果各位有更好的方案,不吝赐教。 [b]1: 针对第三方js库的优化[/b] 我们项目里用到的第三方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。具体做法就是在 [code]build/webpack.base.conf.js[/code]文件的module里面与rules同层加入externals: [img]http://files.jb51.net/file_images/article/201710/20171018105840440.jpg?201791810595[/img] 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部