Web 性能优化四：资源体积压缩与加载策略详解：JS / CSS / 图片 / 字体怎么减负？
你页面加载慢，控制台一看，发现：
-
JS 文件 1.2MB
-
图片加载 2s+
-
字体压根没用几种字，但文件 400KB
-
有些模块压根没用，却被打包进首页了
你不是“代码写得慢”，是“资源拖你后腿”。
本篇文章，我们就来一场“前端页面瘦身计划”：
系统讲清 JS / CSS / 图片 / 字体 等资源的优化方法和加载策略，全面提速页面加载体验。
一、JS 体积优化策略
Tree Shaking
-
自动移除未使用的模块、函数（需使用 ESModule）
-
工具：Webpack、Rollup、Vite 原生支持
提示：
-
避免使用 require() 和动态导入路径
-
使用 lodash-es 替代 lodash，支持按需打包
Code Splitting（代码拆包）
-
按页面/路由/组件分离代码，避免首屏加载全部 JS
const Editor = React.lazy(() => import('./Editor'));页面中按需加载，不加载就不打包。
第三方库优化
| 场景 | 替代建议 |
|---|---|
| 日期处理 | moment.js → dayjs、date-fns |
| 请求库 | axios → fetch 或 ky |
| 工具函数 | lodash → lodash-es / 自己写 |
减少“用了 1 个方法，打包进整个库”的情况。
二、CSS 优化策略
按需加载 + 局部样式
-
避免引入整个 UI 框架 CSS（如 import 'ant-design.css'）
-
拆分为模块 CSS 或按路由 lazy load
-
支持样式隔离的 CSS-in-JS 方案如 styled-components、emotion
Unused CSS 清理
-
工具：PurgeCSS、unplugin-unused-css、tailwind purge 模式
-
剔除构建产物中未被使用的 CSS 类名，极大减少体积
特别适用于 Tailwind / Utility-first 项目
Critical CSS（关键 CSS 内联）
-
将首屏必需样式直接插入 <style>，减少阻塞渲染
配合 SSR / SSG 架构效果最佳，如 Next.js、Nuxt.js
三、图片资源优化策略
图片格式选择
| 格式 | 特点 | 适合场景 |
|---|---|---|
| WebP | 体积小、支持透明 | 通用图像 |
| AVIF | 更小、更清晰 | 静态图、高质量场景 |
| SVG | 矢量图、不失真 | 图标、插图、LOGO |
| JPG/PNG | 老牌支持广 | 兼容性兜底 |
使用 srcset + picture 提供格式兼容：
<picture><source srcset="image.avif" type="image/avif" /><source srcset="image.webp" type="image/webp" /><img src="image.jpg" alt="图" />
</picture>懒加载 + 占位
-
使用 loading="lazy" 原生支持
-
配合渐进图片/模糊占位（如 LQIP、blurhash）
四、字体加载优化
字体子集化（Subset）
-
用工具如 Fontmin、glyphhanger 只保留用到的字符
-
可以将中文字体从 3MB 减至几十 KB
字体加载顺序优化
<link rel="preload" as="font" href="/fonts/main.woff2" type="font/woff2" crossorigin />-
加快字体下载，避免 FOIT（字体空白）
-
配置 font-display: swap 提前展示备用字体
五、加载顺序与策略建议
| 资源类型 | 加载方式 | 优化建议 |
|---|---|---|
| JS 脚本 | defer / async | 非关键 JS 延后执行，关键 JS defer 排序加载 |
| CSS | 外链 + preload | 关键 CSS 提前加载，非首屏延迟加载 |
| 图片 | lazy + 预加载 | 首屏 preload，非首屏 lazy |
| 字体 | preload + swap | 子集优化 + 抢占加载顺序 |
总结：资源优化 = “不加载、少加载、慢加载、压缩加载”
性能优化不是“把所有东西塞得更快”，而是：
-
能不加载就别加载（懒加载）
-
要加载就压缩加载（Tree Shaking、图片格式）
-
加载顺序别乱套（关键先来）
-
不可控的就兜底（字体、图片占位）