直接引入bootstrap.min.css无法真正压缩，因其是已压缩黑盒，webpack仅原样打包未用样式如.carousel、.tooltip，gzip后仍多占15–20kb；必须改用sass源码按需导入functions/variables/mixins及所需组件，并配合mini-css-extract-plugin与cssminimizerplugin才能实现有效压缩与tree-shaking。
直接引入 bootstrap.min.css 不会减小体积，反而锁死冗余样式——Webpack 对它基本不处理，.carousel、.tooltip 等未用组件的 CSS 仍原样打包，gzip 后多占 15–20KB。
为什么 bootstrap.min.css 无法被真正压缩
它已是压缩过的成品文件，Webpack 的 CssMinimizerPlugin 对其几乎无作用；更关键的是，它不含 source map、不参与 loader 流程，mini-css-extract-plugin 提取后也仅做“搬运”，没有 tree-shaking 或按需编译机会。你不是在压缩 CSS，而是在打包一个已封印的黑盒。
必须改用 Sass 源码 + 按需 import
只有让 Bootstrap 的 SCSS 文件进入 Webpack 的 sass-loader → css-loader 流水线，才能触发后续压缩、提取、以及 utility 类的条件性生成。
- 删掉所有
import 'bootstrap/dist/css/bootstrap.min.css'或<link href=".../bootstrap.min.css"> - 新建
src/custom-bootstrap.scss，只导入必需模块，例如：@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";
- 禁用全量
$utilities：Bootstrap 默认的utilities/_utilities会生成上千条规则，改用细粒度子文件，或在变量前覆盖$utilities: () !default; - 确保
sass-loader能解析node_modules，推荐写法：@import "~bootstrap/scss/functions";（需配置resolve.alias或启用webpack.resolve.modules）
CssMinimizerPlugin 生效的前提条件
它只压缩被 mini-css-extract-plugin 提取出来的独立 CSS 资源。如果 CSS 还混在 JS bundle 里（即仍用 style-loader），这个插件就完全不运行。
- 生产环境
module.rules中必须替换style-loader为MiniCssExtractPlugin.loader -
plugins数组中加入：new MiniCssExtractPlugin({ filename: "css/[name].[contenthash:8].css" }), new CssMinimizerPlugin({ parallel: true }) - 确认
mode: "production"已设置——否则CssMinimizerPlugin默认不启用
容易被忽略的细节
Utility 类（如 .p-3、.text-center）看似“按需”，实则默认全量生成；bootstrap/scss/utilities/_utilities 是体积黑洞，不显式清空 $utilities 或改用单个子文件，它就会悄悄拖累打包结果。另外，print.css 和图标字体（如 bootstrap-icons.woff2）若残留引用，也会无声增加几十 KB。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
