Web Performance Optimization & Lighthouse · 课时

减少未使用的 CSS

使用覆盖率工具、清除无用样式和模块化编写，找出并移除使样式表膨胀的无效 CSS，仅发布每个页面实际使用的规则。

减少未使用的 CSS 是 CoddyKit 上的免费 Web Performance Optimization & Lighthouse 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Web Performance Optimization & Lighthouse 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Performance Optimization & Lighthouse 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

The Cost of Dead CSS

Large frameworks and accumulated styles often ship rules no page uses. Unused CSS inflates download size and parse time, and because CSS is render-blocking, it directly delays first paint.

Measuring Coverage

The DevTools Coverage tab records which CSS bytes actually apply during a session. A high unused percentage signals an opportunity to trim.

Why Frameworks Bloat

Utility and component frameworks include thousands of classes for flexibility. If you use a small subset, the rest is pure dead weight unless removed at build time.

Purging Unused Rules

Tools like PurgeCSS scan your templates for class names and strip any selector not referenced, often cutting stylesheets by 90% or more.

// purgecss.config.js
module.exports = {
  content: ['./src/**/*.html', './src/**/*.jsx'],
  css: ['./src/styles.css']
};

Tailwind's Built-In Purge

Utility frameworks like Tailwind scan your content files and generate only the classes you actually use, producing a tiny production stylesheet automatically.

// tailwind.config.js
module.exports = { content: ['./src/**/*.{html,jsx,tsx}'] };

Beware Dynamic Class Names

Purgers work by string matching. Class names built dynamically can be wrongly removed. Use a safelist or full static strings to protect them.

// risky: 'bg-' + color  -> may be purged
// safe: full literal
const cls = isError ? 'bg-red-500' : 'bg-green-500';

Per-Route CSS

Splitting styles by route means each page loads only its own CSS instead of one global blob. Many bundlers and frameworks do this automatically with CSS code splitting.

CSS Modules and Scoping

Scoped styles via CSS Modules or single-file-component styles keep CSS tied to the component that uses it, making unused styles easier to spot and remove.

Minification

After purging, run a CSS minifier (cssnano, esbuild, lightningcss) to strip whitespace, comments, and redundant rules, and compress with Brotli or gzip in transport.

Verifying the Win

Re-run Coverage and Lighthouse after trimming. Lighthouse explicitly reports Reduce unused CSS with the estimated savings, confirming the improvement.

Workflow Summary

Measure with the Coverage tab.
Purge unused selectors at build.
Safelist dynamic classes.
Split CSS per route, then minify.

Quick Check

Your build dynamically composes class names like 'bg-' + color and they disappear in production. What is the likely cause and fix?

Recap

You learned to cut render-blocking CSS by measuring coverage, purging unused selectors, scoping styles per component and route, and minifying. Watch for dynamically built class names and safelist them so purging stays safe.

常见问题解答

「减少未使用的 CSS」课时是免费的吗？

是的 — 「减少未使用的 CSS」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Performance Optimization & Lighthouse 课程的其余内容，请升级到 CoddyKit PRO。 Web Performance Optimization & Lighthouse 课程共包含 4 节课。

「减少未使用的 CSS」这节课中我会学到什么？

使用覆盖率工具、清除无用样式和模块化编写，找出并移除使样式表膨胀的无效 CSS，仅发布每个页面实际使用的规则。你通过在浏览器中直接运行的动手代码来练习 Web Performance Optimization & Lighthouse，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Performance Optimization & Lighthouse 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Web Performance Optimization & Lighthouse 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「减少未使用的 CSS」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Web Performance Optimization & Lighthouse 课中编写并运行代码吗？

能。每节 Web Performance Optimization & Lighthouse 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Web Performance Optimization & Lighthouse