当项目代码量达到一定级别，我们就会发现我们首次进入项目的时间特别长，其原因就是打包过后的app.js大小过大，加载需要一定的时间。

那我们有什么方法可以进行性能优化呢？

关于性能优化

在开始之前，我们需要明白一个原则：性能优化的最终目的是提升用户体验。\ 简而言之就是让用户感觉这个网站很「快」（至少不慢hh），这里的「快」有两种，一种是「真的快」一种是「觉得快」

• 「真的快」：可以客观衡量的指标，像网页访问时间、交互响应时间、跳转页面时间
• 「觉得快」：用户主观感知的性能，通过视觉引导等手段转移用户对等待时间的关注

对症下药

我们知道是app.js文件太大，加载时间太长导致了首屏加载速度过慢，我们就需要对症下药减小app.js的大小，提高网站访问速度，

一、压缩：

对代码进行压缩，我们可以减小代码的体积量。

二、路由懒加载：

当我们使用路由懒加载后，项目就会进行按需加载，其原理就是利用webpack大法的code splitting，当你使用路由加载的写法，webpack就会对app.js进行代码分割，减小app.js的体积，从而提高首屏加载数点。

没使用路由懒加载前的app.js：

使用路由懒加载后对app.js进行code splitting：

三、CDN引入：

采用CDN引入，在index.html使用CDN引入，并在webpack配置。打包之后webpack进会从外部打包第三方引入的库,减小app.js的体积，从而提高首屏加载速度。

没使用CDN引入前app.js的大小：

使用CDN引入后app.js的大小：

四、SSR服务器渲染：

有局限性，禁用了beforeCreate()和created()之外的其他生命周期，我自己没有尝试过使用，但这是一种方案。                                                                 

五、增加带宽：

增加带宽可以提高资源的访问速度，从而提高首批的加载速度，我司项目带宽由2M升级到5M，效果明显。

六、提取第三方库 vendor：

这是也是webpack大法的code splitting，提取一些第三方的库，从而减小app.js的大小。

以上只是一些针对性的方案，web性能优化还有很多，这里简单列举这几种，希望能够帮助到大家。

笔者往期好文：

前端技术日新月异，vue3.0的时代已经来临...

vuex五大核心概念，看完这篇文章就够了

组件通信的8种方式，你搞清楚了吗？