vue项目中怎么优化首页加载速度

本篇文章为大家展示了vue项目中怎么优化首页加载速度，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

在成都网站设计、成都网站建设中从网站色彩、结构布局、栏目设置、关键词群组等细微处着手，突出企业的产品/服务/品牌，帮助企业锁定精准用户，提高在线咨询和转化，使成都网站营销成为有效果、有回报的无锡营销推广。创新互联建站专业成都网站建设十年了，客户满意度97.8%，欢迎成都创新互联客户联系。

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项目中怎么优化首页加载速度，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。

本文题目：vue项目中怎么优化首页加载速度
网站URL：https://www.cdcxhl.com/article42/jcsihc.html

成都网站建设公司_创新互联，为您提供动态网站、搜索引擎优化、网站内链、品牌网站设计、企业网站制作、电子商务

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联