第 3 卷

第 3 / 26 卷日期：2026-01-02

14priority: -20, 15reuseExistingChunk: true, // 复用已存在的 chunk

16} 17}

18},

19	runtimeChunk: 'single',//将运行时代码拆分为单独的chunk，避免缓存失效
20	}
21	}

• CSS 优化：

提取 CSS 为单独文件（避免内嵌在 JS 中，实现样式按需加载），并压缩 CSS 代码：

Code block

1const MiniCssExtractPlugin = require('mini-css-extract-plugin');

2const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

3 4module.exports = {

5module: { 6rules: [

7{ 8test: /\.css$/,

9	use: [MiniCssExtractPlugin.loader, 'css-loader'],//提取CSS
10	},
11	]
12 },
13 plugins: [
14	new MiniCssExtractPlugin({
15	filename: '[name].[contenthash].css',// CSS文件哈希命名
16	}),
17 ],
18 optimization: {
19	minimizer: [
20	`...`,//保留默认JS压缩器
21	new CssMinimizerPlugin(),//压缩CSS
22	],
23 }
24 }

Code block

1module.exports = { 2module: {

3rules: [ 4{

5	test: /\.(png\|jpe?g\|gif\|svg)$/i,
6	type: 'asset',
7	parser: {
8	dataUrlCondition: {
9	maxSize: 8 * 1024,//小于8kb的图片转Base64
10	}
11	},
12	generator: {
13	filename: 'images/[name].[contenthash][ext]',//图片输出路径
14	}
15	},
16	{
17	test: /\.(woff\|woff2\|eot\|ttf\|otf)$/i,
18	type: 'asset/resource',
19	generator: {
20	filename: 'fonts/[name].[contenthash][ext]',//字体输出路径
21	}
22	}
23	]
24 }
25 }

使用 [contenthash] 为 bundle 文件命名（文件内容不变，哈希值不变；文件内容改变，哈希值改变），结合浏览器强缓存（Cache-Control: max-age=31536000），实现静态资源长效缓存。

配置 output.clean: true（Webpack 5+），或使用 CleanWebpackPlugin（Webpack 4），打包前清空 dist 目录，避免旧文件残留。

Code block

1const TerserPlugin = require('terser-webpack-plugin');

2 3module.exports = {

4optimization: { 5minimizer: [

6new TerserPlugin({

7	parallel: true,//并行压缩（多线程）
8	terserOptions: {
9	compress: {
10	drop_console: true,//删除console.log
11	},
12	mangle: true,//混淆变量名
13	}
14	}),
15	],
16 }
17 }

使用 externals 配置，将第三方依赖（如 React、Vue）排除在打包范围外，通过 CDN 引入，减小 bundle 体积：

Code block

1module.exports = { 2externals: {

3react: 'React', 4'react-dom': 'ReactDOM',

5} 6}

然后在 HTML 中通过 CDN 引入：

Code block

1<script

</script>

全站分卷索引 · 26 卷