静态资源与代码体积
涉及 图片与其它媒体、CSS 策略、JavaScript 体积、Tree Shaking 等主题。
1. 图片优化
| 手段 | 说明 |
|---|---|
| 合适格式 | 照片优先 WebP/AVIF（含降级方案）；图标/简单图形可用 SVG |
| 响应式 | srcset / sizes、或构建时多规格输出 |
| 压缩 | 有损/无损压缩控制体积；避免上传未压缩原图 |
| 懒加载 | loading="lazy" 或对非首屏图片Intersection Observer |
| 占位与尺寸 | 预留宽高，减轻 CLS |
2. CSS
- 删除未使用样式：构建期 Purge（Tailwind / UnoCSS 等天然友好）。
- 避免全局污染：模块化、scoped、CSS Modules，减小无效匹配。
- 关键路径：控制首屏 CSS 体积，其余可按需加载。
3. JavaScript 体积与执行成本
- 按需引入：组件库用模块化引入，避免整包
import lodash。 - Polyfill：按 browserslist 裁剪，勿全家桶塞给现代浏览器。
- 压缩与混淆：生产环境默认开启。
4. Tree Shaking
依赖 ESM 静态结构，构建工具分析未引用导出并剔除死代码。
生效条件简述： sideEffects 字段配置准确、避免无意义的副作用导入；第三方库需自身 ESM 友好。
小结
体积优化的口诀：选对格式、少传像素、少打包 JS、声明 sideEffects。用打包分析工具盯住 Top 依赖。