Tailwind或Bootstrap的CSS文件大是因为默认包含大量未使用样式，导致下载、解析和CSSOM构建阻塞渲染；需通过content配置、safelist、按需导入及关键CSS分离等手段优化。
用 Tailwind 或 Bootstrap 时，CSS 文件为什么特别大？
框架体积大不是因为代码写得差，而是默认包含大量未使用的样式规则。Tailwind 的 tailwind.css 全量构建可能超 10MB（未压缩），Bootstrap 的 bootstrap.min.css 压缩后也常达 200KB+。浏览器必须下载、解析、构建 CSSOM，这会阻塞渲染，尤其在弱网下明显卡白屏。
- Bootstrap 默认启用所有组件（
accordion、carousel、tooltip等），即使你只用了button和grid - Tailwind 默认不启用
tree-shaking，@apply和!important指令也会阻止 PurgeCSS（旧版）或content配置失效 - CDN 引入的
https://cdn.jsdelivr.net/npm/bootstrap@5.3/dist/css/bootstrap.min.css无法被 webpack/Vite 自动分析和剔除
如何让 Tailwind 只打包用到的类？
关键在 content 配置必须精确覆盖所有模板路径，且不能遗漏动态拼接的 class 字符串（如 class="text-${color}"）。Vite + Tailwind 项目常见错误是把 content 写成 ["./index.html"]，漏掉 .tsx 或 .vue 文件。
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx,vue}",
// ⚠️ 必须包含所有可能写 class 的文件类型
],
theme: {
extend: {},
},
plugins: [],
}
- 避免在 JS 中动态拼接类名，如
className={`btn btn-${type}`}—— Tailwind 无法静态分析，需显式在safelist中声明：safelist: [/^btn-/, /^text-/] - 禁用未使用的插件，比如删掉
@tailwindcss/forms（除非真用<input type="date">） - 开发时开
TAILWIND_MODE=watch，避免热更新后样式丢失
Bootstrap 能否按需加载 CSS？
可以，但不能靠 CDN 或直接引入 bootstrap.min.css。官方推荐用 Sass 源码 + @import 控制粒度，否则 Webpack / Vite 无法做依赖分析和剔除。
- 不要：
import 'bootstrap/dist/css/bootstrap.min.css' - 要：
import '../scss/custom.scss'，并在该文件中只@import "bootstrap/scss/functions"; @import "bootstrap/scss/variables"; @import "bootstrap/scss/mixins"; @import "bootstrap/scss/buttons"; - 使用
bootstrap-icons时，只 import 需要的 SVG：@import "bootstrap-icons/font/bootstrap-icons.css";→ 改为按需import 'bootstrap-icons/icons/arrow-left.svg' - 注意
$enable-responsive-font-sizes: false这类变量要在@import "functions"后、@import "variables"前设置，否则无效
第三方 CSS 框架影响首屏时间，还能怎么压？
CSS 是渲染阻塞资源，哪怕只有 50KB，若放在 <head> 且未优化，仍会导致 FOUC 或延迟 LCP。核心思路是：分离关键 CSS、异步加载非关键部分、避免重复解析。
立即学习“前端免费学习笔记（深入）”；
- 用
critters（Vite 插件）或critical（Webpack）自动提取首屏用到的内联 CSS，其余link rel="preload"异步加载 - 对非首屏组件（如模态框、图表库）的样式，用
React.lazy + Suspense配合import('./Chart.module.css')动态加载 - 禁止在
<style>标签里写@import url(...)—— 它会阻塞后续 CSS 解析，改用<link rel="stylesheet">并加media="print" onload="this.media='all'"实现无阻塞加载 - 检查是否重复引入：比如同时用了 Bootstrap 和某个 UI 库（如 Ant Design），它们的
reset.css可能叠加冲突，还多下一份
最易被忽略的一点：框架 CSS 里的字体加载策略。很多框架默认用 @font-face 加载本地字体文件，但没设 font-display: swap，导致文本长时间不可见。这个细节比删掉几个 class 更影响感知性能。
