1.前言
性能优化是前端跑不掉的话题，这里结合工作经验，从代码编写优化、打包构建优化、部署优化、性能监控四个方面聊聊性能优化。
2. 代码编写优化（微观）
2.1 资源加载优化
- 图片懒加载，只在图片标签在可视区出现才加载图片资源，可以使用
react-lazyload和vue-lazyload这些库 - 雪碧图，通过图片合并提高加载速度。
- 图片的格式，使用webp或者svg来优化加载速度
- 异步加载非关键js，例如监控SDK的js，可以使用
async和defer避免阻塞DOM渲染。 - 字体文件子集化，通过
font-min对字体文件进行压缩
2.2 CSS优化
- 减少重绘/重排，使用transform/opactiy这些属性等等。
2.3 js 优化
- 防抖/节流，滚动监听、输入事件这些
- 虚拟列表，优化长列表的性能
2.4 React 框架层面优化
- 使用useMemo/useCallback, 缓存计算结果
- 使用React.memo避免组件频繁渲染。
3. 打包构建优化（工程化层面）
3.1 模块优化
- Tree Shaking（ES Module静态分析）
- 动态导入（import()语法）
- 代码分割（SplitChunksPlugin）
- 按需加载（babel-plugin-import）
3.2编译优化
- 缓存loader（cache-loader）
- 多线程打包（thread-loader）
- 预编译资源（DLLPlugin）
- SWC/esbuild替代Babel
- 持久化缓存（filesystem cache）
3.3 产物优化
- 资源压缩（Terser、CSSNano）
- Brotli压缩（brotli-webpack-plugin）
- 删除调试代码（babel-plugin-transform-remove-console）
- 资源哈希（长效缓存）
4. 部署层面（宏观优化）
- 使用CDN
- 开启http缓存
- gzip压缩
5. 性能监控
除了对代码进行性能优化，我们还需要对代码进行监控，去衡量优化效果，持续进行优化。
5.1 性能指标
在前端中，常用如下三个指标
- LCP：从用户请求网址到在视口中渲染最大可见内容元素所需的时间。最大的元素通常是图片或视频，也可能是大型块级文本元素。此指标很重要，因为它反映了访问者看到的网址实际加载速度。
- INP：INP 是一项指标，通过观察用户访问网页期间发生的所有点击、点按和键盘互动的延迟时间，评估网页对用户互动的总体响应情况。
- CLS：CLS 会衡量在网页的整个生命周期内发生的所有意外布局偏移的得分总和。得分是零到任意正数，其中 0 表示无偏移，且数字越大，网页的布局偏移越大。此指标很重要，因为当用户尝试与网页元素互动时，如果网页元素出现偏移，这会导致糟糕的用户体验。
5.2 获取指标工具
- Lighthouse
- web-vitals
6. 总结
本文从微观到宏观的角度对常用的前端优化方式进行了梳理，后面会有文章单独对每种优化方式进行详细描述，欢迎关注。
