如何在打包Webpack时高效压缩Bootstrap生成的CSS文件-css教程-PHP中文网

直接引入bootstrap.min.css无法被压缩优化，因其是已压缩的全量文件，webpack仅原样打包，且未用样式（如.carousel）仍占15–20kb；必须改用sass按需导入并接入css-loader/sass-loader流程，配合mini-css-extract-plugin与cssminimizerplugin才能真正压缩优化。

如何在打包webpack时高效压缩bootstrap生成的css文件

为什么直接引入 `bootstrap.min.css` 无法被压缩优化

Webpack 对已压缩的 CSS 文件（如 bootstrap/dist/css/bootstrap.min.css）基本不做二次压缩——它只是原样打包进产物，连 CssMinimizerPlugin 都难以进一步压榨。更关键的是，这种全量引入让真正没用的 CSS（比如 .carousel、.tooltip 样式）也占着体积，gzip 后仍多出 15–20KB。这不是压缩问题，是“不该加载的东西被加载了”。

必须改用 Sass 源码按需导入，再走 Webpack CSS 构建流程

只有让 Bootstrap 的 SCSS 文件进入 Webpack 的 css-loader + sass-loader 流水线，才能触发后续压缩、提取、tree-shaking（对 utility 类生效）等环节。操作要点：

删掉所有对 bootstrap/dist/css/bootstrap.min.css 的 import 或 <link>

新建 src/custom-bootstrap.scss，只 @import 真正需要的部分，例如：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/utilities/_spacing";
@import "bootstrap/scss/utilities/_text";

确保 sass-loader 能解析 node_modules：在 Webpack 配置中设置 resolve.alias 或依赖 ~ 前缀（如 @import "~bootstrap/scss/functions"）
禁用默认全量 $utilities map，改用精简版，否则 _utilities.scss 会生成上千条无用规则

`CssMinimizerPlugin` 配置必须显式启用，且不能漏掉 `mini-css-extract-plugin`

如果 CSS 还混在 JS bundle 里（即没提取成独立 .css 文件），CssMinimizerPlugin 就不会生效——它只处理被提取出来的 CSS 资源。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

先装两个插件：npm install -D mini-css-extract-plugin css-minimizer-webpack-plugin
在 module.rules 中把 style-loader 换成 MiniCssExtractPlugin.loader（仅生产环境）

在 plugins 数组中加入：

new MiniCssExtractPlugin({ filename: "css/[name].[contenthash:8].css" }),
new CssMinimizerPlugin({ parallel: true })

确认 Webpack mode 是 "production"，否则 CssMinimizerPlugin 默认不运行

容易被忽略的体积黑洞：Bootstrap Table、Icons 和 print.css

很多项目以为只用了 Bootstrap，其实还间接带入了更大体积的依赖。常见隐形来源：

bootstrap-table 默认打包全部扩展和 40+ 语言包，JS + CSS 超 300KB；应通过 imports-loader 或动态 import() 按需加载 extension
残留的 bootstrap-icons/font/bootstrap-icons.css 或 fonts/bootstrap-icons.woff2 文件，单个字体文件就占 60KB+；全局搜索并删除
print.css 在绝大多数管理后台毫无用处，检查 HTML 中是否误写了 <link rel="stylesheet" href="..." media="print">
未关闭响应式断点：保留全部 $grid-breakpoints（xs/sm/md/lg/xl/xxl）会让 utility 类 CSS 膨胀 3 倍；多数项目只需 xs 和 md