Сокращение неиспользуемого CSS
Находите и удаляйте неиспользуемый CSS, увеличивающий таблицы стилей, применяя инструменты анализа покрытия, очистку и модульную разработку, чтобы отправлять только правила, необходимые странице.
«Сокращение неиспользуемого CSS» — бесплатный урок Web Performance Optimization & Lighthouse на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения 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» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Web Performance Optimization & Lighthouse, подпишись на CoddyKit PRO. Курс Web Performance Optimization & Lighthouse содержит 4 уроков всего.
Чему я научусь в уроке «Сокращение неиспользуемого CSS»?
Находите и удаляйте неиспользуемый CSS, увеличивающий таблицы стилей, применяя инструменты анализа покрытия, очистку и модульную разработку, чтобы отправлять только правила, необходимые странице. Ты практикуешь Web Performance Optimization & Lighthouse с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Web Performance Optimization & Lighthouse?
Предыдущий опыт не требуется. Web Performance Optimization & Lighthouse на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Сокращение неиспользуемого CSS»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Web Performance Optimization & Lighthouse?
Да. Каждый урок Web Performance Optimization & Lighthouse включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Критический CSS и доставка CSS
- Оптимизация загрузки шрифтов
- Влияние CSS-in-JS на производительность
- Сокращение неиспользуемого CSS