前端工程化16：静态资源处理：图片/字体/音视频工程化最优方案
文章目录
- 前端工程化16：静态资源处理：图片/字体/音视频工程化最优方案
- 前言
- 一、静态资源的分类与处理目标
- 1. 静态资源分类
- 2. 工程化处理目标
- 二、Vite 项目静态资源处理
- 1. 基础引入方式
- 2. 图片资源优化
- （1）图片压缩
- （2）图片格式转换
- （3）图片内联
- 3. 字体资源处理
- 4. 音视频资源处理
- 三、Webpack 项目静态资源处理
- 1. 基础配置
- 2. 图片压缩
- 四、企业级静态资源优化方案
- 1. 统一使用 CDN 托管静态资源
- 2. 资源路径统一管理
- 3. 懒加载优化
- 4. 响应式图片
- 五、常见问题与解决
- 1. 打包后图片路径错误
- 2. 字体图标不显示
- 文末总结
前言
静态资源（图片、字体、音视频）是前端项目的重要组成部分，也是影响页面性能的关键因素。很多项目上线后加载缓慢，问题大多出在静态资源处理不当上。
本篇将带你从工程化角度，系统解决静态资源的打包、压缩、内联、CDN、缓存全流程问题，让你的项目资源加载速度提升50%以上。
一、静态资源的分类与处理目标
1. 静态资源分类
- 图片资源：JPG、PNG、WebP、SVG、GIF
- 字体资源：TTF、WOFF、WOFF2
- 音视频资源：MP4、MP3
- 其他资源：JSON、第三方库文件
2. 工程化处理目标
- 减小体积：在不影响画质的前提下，最大限度压缩资源
- 按需加载：非首屏资源懒加载，不阻塞页面渲染
- 缓存优化：利用浏览器缓存，避免重复请求
- 路径管理：统一管理资源路径，避免相对路径混乱
二、Vite 项目静态资源处理
Vite 内置了强大的静态资源处理能力，大部分场景开箱即用。
1. 基础引入方式
- 放在
public目录下的资源，不会被构建工具处理，直接复制到打包目录，通过/xxx直
