前端性能优化-构建优化、传输加载优化

常见构建优化方案：

1、tree-shaking：上下文未用到的代码（dead code），基于ES6 import export

2、作用域提升：代码体积减小，提高执行效率

3、noparse、DllPlugin

4、code splitting代码拆分

5、持久化缓存方案：给每个打包资源文件增加hash值，充分利用浏览器缓存

 

常见网络传输优化：

1、启用压缩Gzip，对传输资源进行体积压缩，可高达90%。

2、启用Keep Alive，对TCP链接的复用。

3、HTTP资源缓存：

　　（1）Cache-Control/Expires

　　（2）Last-Modified + If-Modified-Since

　　（3）Etag + If-None-Match

4、Service Workers，加速重复访问，离线支持

 

Service Workers注意项：会延长首屏时间，但页面总加载时间减少，兼容性需要考虑如IE，只能在localhost或https下使用。

5、使用HTTP2，HTTP2优势：二进制传输、请求响应多路复用、Server push减少了TTFB时间

 

6、搭建SSR服务端渲染，加速首屏加载，更好的SEO