关于前端性能优化，你做了哪些？

1. webpack打包优化，分包，压缩

这里使用webpack5打包，会有一些新特性，比较好用。

• 开启持久化缓存加快构建速度，
• Tree Shaking：消除未使用的代码，减小文件体积，
• 在splitChunks中进一步详细分包，提取公共的模块，减少重复打包，
• 使用压缩插件，压缩打包的体积。

2. 使用gzip压缩传输

Gzip压缩是一种压缩方式，针对文本文件时通常能降低2/3的体积，可以减少传输的负担。

HTTP协议中用头部字段Accept-Encoding 和 Content-Encoding对「采用何种编码格式传输正文」进行了协定，请求头的Accept-Encoding会列出客户端支持的编码格式。当响应头的 Content-Encoding指定了gzip时，浏览器则会进行对应解压。

一般浏览器都支持gzip，所以Accept-Encoding也会自动带上gzip，所以我们需要让资源服务器在Content-Encoding指定gzip，并返回gzip文件

3. 图片处理

• 使用雪碧图合并图片，通过css定位展示不同图片，减少浏览器请求次数。
• 优先级不高的图片使用懒加载，或者使用背景图background-image定位替代img标签。
• 动态渲染，当页面快要到视口时再加载图片。

4. 减少cookie体积

减少请求头cookie的体积，加快请求速度。

5. 开启预解析功能，Prefetch、Preload

<link>标签的rel属性的两个可选值。

Prefetch，预请求，是为了提示浏览器，用户未来的浏览有可能需要加载目标资源，所以浏览器有可能通过事先获取和缓存对应资源，优化用户体验。
Preload，预加载，表示用户十分有可能需要在当前浏览中加载目标资源，所以浏览器必须预先获取和缓存对应资源。

6. 开启浏览器缓存

根据业务场景开启协商缓存或者强缓存策略。有以下优点：

• 减少冗余的数据传输
• 减少服务器负担
• 加快客户端加载网页的速度

1. 强缓存特点：
   当请求资源的时，如果是之前请求过的并使用强缓存，那么在过期时间内将不会发送本次请求向服务器获取资源，而是直接从浏览器缓存中获取（不管资源是否改动）。过期了将重新从服务器获取，并再次强缓存。
   强缓存是利用http头中的Expires和Cache-Control两个字段来控制的ÿ