---

一、用户打开页面发生了什么

1. 下载文件

请求前端包中的index.html，里面引用了app.js，cdn的资源（比如Vue、Element），全局样式，以及第一屏对应页面打包的js文件。
这些都需要一一下载。

2. 读取文件

读取文件并执行，才能正常的展示页面。如果文件的js过大，就会增大读取时间，用户等待时间更长。

3. 渲染页面

要尽可能早的让用户看到内容，即使没有加载完，也最好给用户一个东西，避免白屏或者长时间的loading。

二、优化思路

1.减小文件大小，减少下载时间

如果不做任何优化，引用的js文件中，就会包含项目用到的npm包，比如Element、Vuex、axios、Eharts等，这些文件非常大，无论是下载还是加载时间都会非常长。

1.1 使用cdn

对于稳定可信赖的npm包，可以考虑cdn，比如Vue、Element、vuex、axios等。有两个好处：
a. 使用cdn后，这些库的文件就独立引用，不打包进自有前端包中，大大缩小前端包的体积。
b. 使用cdn，可以通过cdn技术，快速找到距离访问者最近的服务器节点，减少下载用时，比把这些文件放到自己服务器下效果更好。
c. Element、Vuex等库所属的公司，每年要花费大量的成本维护和优化cdn服务，直接使用，用大厂的钱，做自己的项目。

注意事项：
a. 注意库的引用先后关系，比如Vue放到Element前面。
b. 建议锁定版本，避免库更新迭代导致的问题。

1.2 路由懒加载

路由懒加载，将每个路由对应的页面拆为单独的js文件，减小app.js的大小，提高首屏加载速度。webpack打包时先会分析依赖关系，使用import引用的资源会被识别为单独模块打包，会生成独立的chunk文件。当后续页面被打开时，会再去加载对应的chunk文件。

注意：
webpack打包时会进行资源整合，也就是会把项目中的JS、CSS等文件按照一定的规则进行合并，以达到减少资源请求的目的。

1.3 提取公共模块

项目开发中使用的npm包，也会打包到app.js或者chunk文件中去，影响包的体积，这些内容不常变动，可以提取出来。使用webpack的splitChunks，将公共文件提取为vendor文件。给vendor文件命名时，增加chunkhash，使用浏览器的缓存能力，后续加载就直接读取缓存了，且前端包有改动再次发包，vendor文件一般不会有变化，chunkhash也不会变化，用户使用新版前端包时，vendor文件不用重新下载。

1.4 开启gzip压缩

在前端打包时开启gzip压缩，将js压缩成gz文件，2M的文件压缩后大约0.7M。一方面可以减少服务器磁盘空间使用，另一方面在网络传输、浏览器下载时，更加快速。
在4G网络模拟下，2M文件未压缩传输时间是4.1s，压缩后为700k，传输时间是1.4s，加上解压时间约15ms，总耗时还是减少了65%。
网络环境越差，gzip的效用越高，这在移动端性能优化时是非常重要的手段。

注意
gzip对文本文件的压缩效果非常好，但对于图片、音视频，作用不大，在项目配置中，对这些文件不要开启gzip。另外，对于小于1k的文件，经gzip压缩后甚至比原文件还要大，也需要过滤掉。
除了打包时要配置，nginx中也要做相应配置，开启gzip。如果开启了gzip，文件的响应头中可以看到Content-Encoding这个属性。

1.5 利用浏览器缓存

对于前端项目，一般会采用入口文件协商缓存，静态资源强缓存的模式，每次打包，如果js、css文件有更改，会修改对应chunk文件的hash值，这会体现到html中的引用路径中。由于html采用协商缓存，所以它里面引用资源的hash值都是最新的。
上面提到的chunk文件，都会被强缓存。如果不特别设置，css会直接插入到head中，可以使用webpack插件，将css也提取成文件，这样css也可以使用到缓存了，非首次加载，可以大大提升加载速度。
Webpack的hash有三种，hash、chunkhash、contenthash。hash是项目有文件变化就会更改，chunkhash是当前入口里的文件或者引用的文件有变化会更改，contenthash是文件内容有变化就会更改。建议js使用chunkhash，这对提取的第三方vendor.js尤其有效。提取的css文件建议使用contenthash。这样，即使前端版本更新，也会有很多资源的hash值不会变化，用户可以只下载发生变化的文件就能使用新版本，提升加载速度和体验。

2. 减小首次加载文件大小，减少读取文件的时间

当命中一个路由，会加载对应的chunk文件。如果该页面交互特别复杂，内部有多个大型的组件，导致chunk文件非常大，也会影响用户看到内容的时间。

2.1 组件懒加载

把组件的代码从路由入口的chunk文件中拆出去，减小其体积，这样chunk文件的读取时间大大缩小，用户可以更快的看到页面。搭配骨架屏，让用户即使在等待，也是在循序渐进的等待。

注意事项：
如果使用了组件懒加载，页面对应vue文件和子组件的加载完成顺序不可控，页面vue文件mounted的时候，子组件并不一定mounted了，这时如果使用了$refs的方式寻找子组件，可能会报错，需要用其他方式操作子组件。

3. 渲染页面体验

3.1 等待动画

使用骨架屏、loading等方式，提升用户等待时间的体验

3.2 减少首屏做的事

减少首屏调用的接口数，首屏接口要尽可能快，优先加载第一屏的内容，后续内容懒加载。
比如说商城首页，可以设计一个banner，占一部分内容，设计一个推荐模块，或者其他的，让接口尽可能的小，比较重的接口对应的内容，尽量放到第二屏。商品列表也要分页，滚动到一定位置自动加载下一页。
还有商品列表的图片、banner的图片，最好使用懒加载，让框框和文字先加载出来，用默认图代替位置，加载出来后再展示到页面上。这样也能提升用户体验。

总结

对于一个页面，程序需要做的事情总是那么多，性能优化就是分清要做哪些事，然后排优先级，把优先级高的先做，让界面展示出来，让用户看到内容。剩下的优先级不高的事，就慢慢来。

还有什么其他好的优化方法，欢迎各位大佬评论区讨论分享哈！