Cách giảm CSS bundle size?

Question

Luyện Phỏng Vấn IT · Accepted Answer

Bốn hướng, xếp theo mức giảm được nhiều nhất:

1. Xoá CSS không dùng — thường là phần lớn nhất.

bash

# Tailwind: quét source, chỉ sinh class thật sự xuất hiện
# Với CSS viết tay: PurgeCSS
npx purgecss --css dist/main.css --content 'dist/**/*.html' --output dist/

Dùng tab Coverage trong DevTools để đo tỉ lệ CSS chết trước và sau.

2. Tách CSS theo route. Next.js và Vite làm sẵn nếu import CSS trong component thay vì gom hết vào một file toàn cục.

3. Nén.

bash

# minify: xoá khoảng trắng, rút gọn màu, gộp luật
npx cssnano main.css main.min.css

Cộng với Brotli ở tầng server — thường giảm thêm 70–80% so với bản đã minify.

4. Bớt trùng lặp trong lúc viết: dùng shorthand, gom biến vào custom property, tránh khai báo lại cùng một giá trị ở nhiều component.

Lưu ý 1: PurgeCSS không thấy class dựng động (` btn-${variant} `) và sẽ xoá nhầm. Viết đủ tên class hoặc khai báo safelist.

Lưu ý 2: đo sai chỉ số. Cái ảnh hưởng tới người dùng là kích thước sau nén và có chặn render hay không — một file 200KB tải không chặn ít hại hơn 30KB chặn render.

Chốt: với phần lớn dự án, CSS hiếm khi là nút thắt thật — kiểm tra xem JavaScript và ảnh có nặng hơn nhiều không trước khi dành thời gian ở đây.