Cách giảm CSS bundle size?

Các chiến lược giảm CSS bundle size:

• PurgeCSS / Tailwind JIT: loại bỏ unused CSS — giảm đến 90% với Tailwind
• CSS Modules / scoped CSS: tree-shake styles không dùng theo component
• cssnano: minification — xóa whitespace, shorten colors, merge rules
• Shorthand properties: margin: 10px 20px thay vì 4 dòng riêng
• Code-split CSS theo route: mỗi trang chỉ load CSS cần thiết
• Brotli/gzip compression: bật ở server level
• DevTools Coverage tab: audit và phát hiện CSS thừa

Several strategies work well.

• First, remove unused CSS with PurgeCSS or Tailwind JIT mode — which scans HTML/JS files and keeps only used classes, potentially reducing file size by 90% with Tailwind.
• Next, use CSS Modules or scoped CSS to tree-shake unused component styles.
• Minification with cssnano compresses code by removing whitespace, shortening colors, and merging rules.
• Use shorthand properties (margin: 10px 20px instead of 4 separate lines) to reduce duplication.
• Code-split CSS per route so each page only loads what it needs.
• Finally, enable Brotli/gzip compression at the server level and use the Coverage tab in DevTools to audit and detect unused CSS.