本篇文章为大家展示了vue项目中怎么优化首页加载速度,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
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项目中怎么优化首页加载速度,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。