资源处理
约 604 字大约 2 分钟
2026-02-11
优化 Webpack 性能时，资源处理通常是第一批高收益点。
因为资源策略会同时影响：
- 首包体积。
- 网络请求数量。
- 浏览器缓存命中。
为什么资源处理很关键
前端资源不只 JS，还包括：
- 样式（CSS/Sass/Less）
- 图片（png/jpg/svg/webp）
- 字体（woff/woff2/ttf）
如果处理策略不合理，常见后果是：
- 首包过大（比如小图全部内联或大图误内联）。
- CSS 无法独立缓存（生产仍使用
style-loader）。 - 资源路径错乱（
publicPath不匹配部署环境）。
样式处理：开发与生产要分开
开发阶段要快，生产阶段要可缓存，这是两套目标。
// webpack.config.cjs
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProd = process.env.NODE_ENV === 'production';
module.exports = {
module: {
rules: [
{
test: /\.s?css$/,
use: [
// 开发注入到页面，生产抽离为独立文件
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[name].[contenthash:8].chunk.css',
}),
],
};静态资源处理：Webpack 5 推荐方案
Webpack 5 的 Asset Modules 已覆盖大多数历史 file-loader/url-loader 场景。
module.exports = {
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset',
parser: {
dataUrlCondition: {
// 小图内联，大图输出文件
maxSize: 8 * 1024,
},
},
},
{
test: /\.(woff2?|ttf|eot)$/i,
type: 'asset/resource',
},
],
},
};| 类型 | 行为 | 建议 |
|---|---|---|
asset/resource | 输出独立文件并返回 URL | 大图、字体首选 |
asset/inline | 资源转为 DataURL 内联 | 极小图标可用 |
asset/source | 源码字符串导入 | 文本模板场景 |
asset | 自动择优 inline/resource | 默认推荐 |
Asset Modules 选型
资源路径与 publicPath
如果线上资源来自 CDN 或子路径部署，必须显式配置 publicPath。
module.exports = {
output: {
publicPath: 'https://cdn.example.com/assets/',
},
};否则产物引用地址默认按相对路径拼接，部署后极易出现 404。
使用注意事项
建议
- 生产环境抽离 CSS，确保样式可独立缓存。
- 通过
maxSize控制内联阈值，避免 JS 体积被图片拖垮。 - 部署前在真实域名下验证资源路径。
常见错误
- 生产仍使用
style-loader。 - 忽略
publicPath，导致 CDN 场景资源找不到。 - 资源规则过于宽泛，误匹配导致产物异常。
最佳实践
- 把“资源策略”作为性能优化清单中的固定项。
- 建立统一资源目录规范（
js/、css/、assets/）。 - 优化前后对比：首包体积、请求数、缓存命中率。