vue项目首页加载速度优化

rickchen 发布于2019-08-21 17:06 / 3225人阅读

摘要：凡是做的项目，特别是移动端的项目，首屏加载速度必定是一个绕不过去的话题。大家知道这些依赖库的文件都会被一起打包到那个文件里面，如果这些你的第三方依赖库很多，很大的话，那就会导致这个文件很大，那首屏加载的速度肯定会被拖慢。

凡是做SPA的项目，特别是移动端的SAP项目，首屏加载速度必定是一个绕不过去的话题。接下来我就我们项目里的一些实践来做一下总结。希望抛砖引玉，如果各位有更好的方案，不吝赐教。

1: 针对第三方js库的优化

我们项目里用到的第三方js库主要有：vue, vue-router, vuex, axio, 我们还用到了qiniu。大家知道这些依赖库的js文件都会被一起打包到vender那个js文件里面，如果这些你的第三方依赖库很多，很大的话，那就会导致vender这个文件很大，那首屏加载的速度肯定会被拖慢。

针对这个问题我们的解决方案是，用文档的cdn文件代替，而不用打包到vender里面去。具体的做法是：

1: 在index.html里面引入依赖库js文件

 // index.html

2: 去掉第三方js的import,因为在第一步已经通过script标签引用进来了。

3: 把第三方库的js文件从打包文件里去掉

这一步的做法就是利用webpack的externals。具体做法就是在 build/webpack.base.conf.js文件的module里面与rules同层加入externals：

2: 利用vue-router进行页面的懒加载（lazy load）

这里的页面的懒加载是指，假如我现在访问A页面，只会去请求A页面里的东西，其他页面的东西不会去请求。
具体怎么做，vue-router的官网都写得很清楚了,有需要的去看一下就懂了：
通过vue-router实现页面的懒加载

3: 图片资源的压缩
严格说来这一步不算在编码技术范围内，但是却对页面的加载速度影响很大，特别是对于移动端的项目来说。
对于非logo的图片文件，让UI设计师提供jpg格式的，不要用png.
对于所有的图片文件，都可以在一个叫tinypng的网站上去压缩一下。网址：
https://tinypng.com/

成果总结：
通过以上的那些方案，再加上我们的代码本来就是部署在CDN上面的，我们在移动端（微信，QQ，浏览器等）基本都能达到秒开的效果。

GPU云服务器云服务器云服务器搭建vue项目腾讯云服务器部署vue项目 vue项目放到云服务器上阿里云服务器搭建vue项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89128.html

提升90%加载速度——vuecli下的首屏性能优化

摘要：如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。前言之前用vuecli做了个博客，是一个单页面项目，大概有十个路由直接npm run build打包出来，有一个1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先挂载到服务器上试试好家伙...

dreamtecher 2019-08-23 18:09 评论0 收藏0
vue2首页加载慢的问题

摘要：开发完了，并部署到服务器后，就遇到了一个非常明显的问题。所以可以利用按需加载来进一步缩小文件的体积。另外图片还可以去下面这个网上压缩一下经过上述的几步，首页的加载速度已经比较快了，项目经理也比较满意。初步结束了首页加载慢的问题的研究。本次开发的项目中使用了vue2.5.2和自带的vue-cli生成了前端的基本架构。随后在项目开发当中，添加了自己写的UI组件，和复杂的业务逻辑。整个项目...

canopus4u 2019-08-22 16:11 评论0 收藏0
Vue SPA(单页应用)首屏优化实践

摘要：原文首发代码压缩如果你用的是服务器，请修改配置文件其他类似在里加入开启或者关闭模块，这里使用表示启动设置允许压缩的页面最小字节数默认值是，不管页面多大都压缩设置系统获取几个单位的缓存用于存储的压缩结果数据流代表以为单位，按照原始数据大原文首发：　https://shuirong.github.io/ 1.代码压缩(gzip) 如果你用的是nginx服务器，请修改配置文件(其他web ...

wall2flower 2019-08-21 11:41 评论0 收藏0
vue首屏加载优化

摘要：为了让事情更简单，允许将组件定义为一个工厂函数，动态地解析组件的定义。只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前首先我们在正常情况下buildshowImg(https://segmentfault.com/img...

Kaede 2019-08-20 17:44 评论0 收藏0
浅谈webpack4.0 性能优化

摘要：中在性能优化所做的努力，也大抵围绕着这两个大方向展开。因此，将依赖模块从业务代码中分离是性能优化重要的一环。大型库是否可以通过定制功能的方式减少体积。这又违背了性能优化的基础。接下来可以抓住一些细节做更细的优化。中，为默认启动这一优化。前言：在现实项目中，我们可能很少需要从头开始去配置一个webpack 项目，特别是webpack4.0发布以后，零配置启动一个项目成为一种标配。正因为...

leanxi 2019-08-26 13:25 评论0 收藏0