详解vue项目首页加载速度优化_vue2项目首屏优化的难点及解决办法资源-CSDN文库

vue首页加载优化

vue加载优化

vue首屏加载优化

45 浏览量 2020-08-29 02:56:46 上传评论收藏 93KB PDF 举报

资源推荐

资源详情

资源评论

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

主要介绍了详解vue项目首页加载速度优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟

随小编过来看看吧

凡是做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：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

内容反馈

weixin_38595356

粉丝: 9
资源: 940

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip