只换bootstrap.min.css不配SRI和Brotli等于无效优化：必须用带integrity和crossorigin的CDN链接，服务器启用Brotli（压至22–25KB），并删减未用样式或按需导入Sass模块。
只换 bootstrap.min.css 或 semantic.min.css 文件名，不配服务器压缩和完整性校验，基本等于没优化。
CDN 引入必须带 integrity 和 crossorigin
不加 integrity，浏览器无法验证 CDN 返回内容是否被篡改或缓存污染；不加 crossorigin，SRI（Subresource Integrity）直接失效，CDN 缓存也无法跨站复用——反而多一次请求。
- 正确写法：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-..." crossorigin="anonymous"> - 务必从官方 CDN 页面复制完整
integrity值，手动拼错一个字符就会导致样式加载失败且静默降级（无报错，但样式不生效） - 如果用自建 CDN 或 Nginx 代理，
integrity值必须对应你实际部署的文件哈希，不能照搬官方值
服务器必须启用 Brotli（优先）或 gzip
bootstrap.min.css 原始体积约 70KB，未启用压缩时就按这个大小传；启用 Brotli 后可压到 22–25KB，gzip 约 28–32KB。差距不是“有没有压缩”，而是“能不能压到首屏关键 CSS 控制在 30KB 内”。
- Nginx 配置需显式开启：
brotli on;、brotli_comp_level 6;，并确认 MIME 类型包含text/css - Apache 需加载
mod_brotli模块，不能只开mod_deflate - Vercel / Netlify 等平台默认已启 Brotli，但若你用自定义
_headers覆盖了响应头，可能意外关掉压缩
Webpack/Vite 构建阶段不能只靠 MiniCssExtractPlugin
Webpack 5+ 默认不压缩提取出的 CSS，MiniCssExtractPlugin 只负责“抽出来”，不负责“压小”。很多人上线后发现 CSS 文件还是明文、体积没变，就是漏了这步。
立即学习“前端免费学习笔记（深入）”；
- 必须装
css-minimizer-webpack-plugin并在optimization.minimizer中显式注册 - 推荐配置：
new CssMinimizerPlugin({ parallel: true })，否则多文件场景下压缩会串行变慢 - 如果项目用了 PostCSS（比如
autoprefixer），确保css-minimizer-webpack-plugin的minify选项和postcss.config.js兼容——重复启用cssnano会导致calc()被错误折叠、@layer规则丢失
删未用样式比压缩更有效，但得选对方式
压缩只能把 117KB 的 Bootstrap CSS 压到 70KB，而 PurgeCSS 能干到 35KB；Semantic-UI 从 735KB 到 551KB 的所谓“25% 压缩”，其实只是基础 minify，远不如按需剔除。
- 别信“全量引入 + 压缩 = 安全”，真正拖慢 FCP 的是首屏根本不用的
.tooltip、.offcanvas等规则带来的解析开销 - PurgeCSS 配置要覆盖所有模板路径，比如
content: ['./src/**/*.{html,js,ts,jsx,tsx}']，漏掉一个组件文件，对应类名就保留在 CSS 里 - 用 Sass 源码定制更彻底：注释掉
scss/bootstrap.scss里不需要的@import，但要注意依赖顺序（比如utilities必须在最后）
最常被忽略的一点：CSS 做了精简，JS 却还 import 'bootstrap' 全量加载——JS 包体积没动，首屏解析压力还在，优化效果直接打对折。
