优化前端单页面应用性能指南

?对于单页面应用来说，最理想的情况是每个路由的页面性能都是最佳的。

如果以此为目标，如何实现呢？

全局性方案

1. 减少文件大小，包括js，图片，css等;具体的方法可以采用压缩css、js文件；也可以压缩图片，当然还可以使用雪碧图
2. 采用tree shaking方式进一步减少js文件大小
3. 限制首屏加载资源的请求数或者采用多域名请求资源：以谷歌浏览器为例，默认同时请求资源的上线数是4个，可以通过多域名突破这个限制
4. 通过webpack对文件进行拆包，然后利用浏览器可以同时请求的机制加快资源加载
5. 采用CDN，加速资源请求
6. 开启Gzip，进一步减小传输文件大小
7. 采用预渲染或者服务端渲染的方案：JS驱动靠后

针对性的优化措施

1. 除了首屏其他采用异步路由的方式
2. 对于组件来说如果引入了某个特定的js，可以利用createElement的方式动态引入js；理论上对于css也可以这种动态方案
3. 对于图片来说采用懒加载的方式

4. 局部组件也采用异步组件方案

5. 采用keep-alive

6. 采用函数式组件

利用缓存机制

1. 利用server worker
2. 利用max-age
3. 利用if-modified-since和e-tag

总结：开发同样是戴着镣铐跳舞，最好的性能一定是在浏览器能力范围之内的；浏览器对请求数有限定，对请求的资源大小有限制，对渲染的资源也有限制。最好的性能应该兼顾用户体验的情况下，请求的资源足够必要尽量小，渲染的内容足够必要也足够克制。资源要么一次请求要么分步请求。

优化前端单页面应用性能指南

原文：https://www.cnblogs.com/zhensg123/p/14651109.html