你页面加载慢，控制台一看，发现：
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、图片格式）
加载顺序别乱套（关键先来）
不可控的就兜底（字体、图片占位）