在webpack多页面应用中，公共CSS的优化是提升性能的关键，通过配置mini-css-extract-plugin将CSS抽离为独立文件，结合optimization.splitChunks提取公共模块，将共享样式（如全局样式、通用组件样式）配置为公共入口，再利用HtmlWebpackPlugin的chunks选项，在各页面HTML模板中引入公共CSS chunk，避免重复加载，这样既能减少冗余请求，优化加载性能，又能确保样式复用，维护多页面样式一致性。
Webpack 多页面应用中公共 CSS 的优化与实践
在多页面应用（MPA）开发中，多个页面通常共享大量样式资源，如全局样式、组件库样式、主题样式等，如果处理不当，公共 CSS 可能会被重复打包到每个页面的入口 chunk 中，导致以下问题：
- 打包体积冗余：每个页面都包含一份公共 CSS，整体构建产物体积显著增大；
- 加载效率低下：用户切换页面时，需重复加载相同的公共 CSS，造成不必要的带宽浪费；
- 缓存利用率低：公共 CSS 更新时，若未合理拆分，可能导致所有页面的 CSS 缓存同时失效。
Webpack 作为现代前端构建工具，提供了灵活的机制来优化多页面的公共 CSS 处理，本文将结合具体实践，详细讲解如何通过 Webpack 抽取、优化公共 CSS，提升多页面应用的性能与可维护性。
公共 CSS 的核心痛点
在深入解决方案前,我们先明确多页面应用中公共 CSS 的典型痛点：
重复打包，体积膨胀
假设项目有 3 个页面（A、B、C），每个页面都引入了 reset.css、global.css 和 antd.css，若未对公共 CSS 进行处理，Webpack 会将这 3 个 CSS 文件分别打包到每个页面的 chunk 中，最终导致产物中存在 3 份 reset.css、3 份 global.css 和 3 份 antd.css，体积直接膨胀 3 倍，这不仅增加了构建产物的体积，也加重了服务器的存储压力。
加载性能损耗
用户首次访问页面 A 时，需加载 A.js 和 A.css（包含公共 CSS）；切换到页面 B 时，需重新加载 B.js 和 B.css（再次包含公共 CSS），若公共 CSS 较大（如 100KB），用户需重复下载 100KB 数据，显著影响加载速度和用户体验，在移动网络环境下，这种性能损耗尤为明显。
缓存策略失效
公共 CSS 更新时（如修改全局主题色），若未拆分为独立 chunk，所有页面的 CSS 文件 hash 会因内容变化而更新，导致用户已缓存的旧版本 CSS 失效，重新下载所有页面的 CSS，这不仅违背了浏览器缓存优化的初衷，还会导致用户在访问其他页面时重新加载完整的 CSS 资源。
Webpack 解决方案：抽取公共 CSS 为独立 Chunk
Webpack 的核心思路是：将公共 CSS 抽取为独立的 chunk 文件，所有页面共享该文件，通过 <link> 标签引入，实现这一目标需要依赖两个关键插件：
MiniCssExtractPlugin：将 CSS 从 JS chunk 中提取为独立文件（替代style-loader）；SplitChunksPlugin：拆分公共模块（包括 CSS），生成共享 chunk。
实践步骤：配置 Webpack 抽取公共 CSS
假设项目结构如下（典型的多页面应用）：
src/
├── common/ # 公共资源
│ ├── css/
│ │ ├── reset.css # 重置样式
│ │ └── global.css # 全局样式
│ └── js/
│ └── utils.js # 公共工具函数
├── pages/ # 页面
│ ├── page1/
│ │ ├── index.js # 页面1入口
│ │ └── index.css # 页面1独有样式
│ └── page2/
│ ├── index.js # 页面2入口
│ └── index.css # 页面2独有样式
└── index.html # 模板文件（通过 HtmlWebpackPlugin 生成页面）安装必要依赖
npm install --save-dev webpack webpack-cli html-webpack-plugin mini-css-extract-plugin css-loader postcss-loader postcss-preset-env
配置 webpack.config.js
核心配置包括：多入口设置、MiniCssExtractPlugin 配置、SplitChunksPlugin 配置公共 CSS 抽取规则。
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
// 1. 多入口配置：每个页面一个入口
entry: {
page1: './src/pages/page1/index.js',
page2: './src/pages/page2/index.js',
// 公共 JS 入口（可选）
common: './src/common/js/utils.js'
},
// 2. 出口配置
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[contenthash:8].js', // JS 文件加 contenthash
clean: true,
},
// 3. 模块解析规则
module: {
rules: [
// CSS 处理：先通过 css-loader 解析，再通过 postcss-loader 添加兼容性前缀，最后由 MiniCssExtractPlugin 提取
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // 提取 CSS 为独立文件
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
preset: 'postcss-preset-env' // 自动添加浏览器兼容性前缀
}
}
}
],
exclude: /node_modules/ // 排除 node_modules 中的 CSS 文件
}
]
},
// 4. 插件配置
plugins: [
new MiniCssExtractPlugin({
// 抽取的 CSS 文件名配置
filename: 'css/[name].[contenthash:8].css',
chunkFilename: 'css/[id].[contenthash:8].css'
}),
// 为每个页面生成 HTML 文件
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'page1.html',
chunks: ['page1', 'common'], // 指定页面包含的 chunk
minify: {
collapseWhitespace: true,
removeComments: true
}
}),
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'page2.html',
chunks: ['page2', 'common'], // 指定页面包含的 chunk
minify: {
collapseWhitespace: true,
removeComments: true
}
})
],
// 5. 优化配置：拆分公共模块
optimization: {
splitChunks: {
chunks: 'all', // 同时对同步和异步模块进行拆分
cacheGroups: {
// 公共 CSS 抽取规则
styles: {
name: 'styles',
test: /\.(css|less|sass|scss)$/,
chunks: 'all',
enforce: true // 强制拆分，即使模块很小
},
// 公共 JS 抽取规则
commons: {
name: 'commons',
minChunks: 2, // 至少被 2 个 chunk 引用
chunks: 'all',
priority: 20, // 优先级高于 vendor
reuseExistingChunk: true // 复用已存在的 chunk
},
// 第三方库抽取规则
vendor: {
test: /[\\/]node_modules[\\/]/,
name:
