应引用构建输出的压缩版CSS文件（如style.min.css），通过检查dist/或build/目录确认文件存在，并在HTML中正确设置link路径；推荐使用Webpack、Vite等工具自动注入压缩CSS，避免手动引入重复文件或路径错误。
构建后引入压缩版 CSS 文件（如 style.min.css），核心是确保 HTML 正确引用构建输出路径下的文件，而非原始未压缩的源文件。
确认构建工具输出路径和文件名
Webpack、Vite、Rollup 等工具默认会将压缩后的 CSS 输出到 dist/ 或 build/ 目录下，文件名常含 .min.css 后缀（如 main.min.css）。先检查构建产物目录，确认实际生成的文件是否存在、路径是否正确。
HTML 中直接引用 min 文件（静态项目）
若项目是纯静态 HTML + 构建 CSS，手动修改 index.html 中的 <link> 标签：
<!-- 构建前（开发用） --> <link rel="stylesheet" href="css/style.css"> <p><!-- 构建后（上线用） --> <link rel="stylesheet" href="css/style.min.css">
注意路径要与构建输出结构一致（例如输出在 dist/css/style.min.css，则 href 应为 css/style.min.css，前提是 HTML 也在 dist/ 根目录）。
立即学习“前端免费学习笔记（深入）”；
构建工具自动注入（推荐方式）
多数现代构建工具支持自动处理资源引用，无需手改 HTML：
-
Webpack + HtmlWebpackPlugin：配置
minify: true并启用mini-css-extract-plugin，插件会自动提取并压缩 CSS，HtmlWebpackPlugin 默认将生成的.min.css文件名注入到 HTML 的<link>中。 -
Vite：默认开启 CSS 压缩（生产构建时），且会自动重写 HTML 中的资源引用，指向带哈希的压缩文件（如
style.abc123.min.css），你只需保持<link href="/style.css">，构建后会被自动替换。 -
Rollup + postcss + cssnano：配合
rollup-plugin-html或手动在generateBundle钩子中注入压缩后的 CSS 路径。
避免常见错误
• 不要同时引入 style.css 和 style.min.css —— 会造成重复加载和样式冲突。
• 检查浏览器开发者工具的 Network 面板，确认加载的是 .min.css 文件，状态码为 200，且响应内容已压缩（无换行、空格极少）。
• 若使用 CDN 或缓存，记得更新缓存版本（如加查询参数 ?v=1.2.0 或用文件哈希命名）。
