Kích thước thật sự của file bootstrap.min.css

Mình đang làm một project có sử dụng bootstrap. Tình cờ mình phát hiện ra một vấn đề thế này. File bootstrap.min.css trong quá trình browser load về từ trang chủ của bootstrap (file này được sử dụng cho giao diện của trang bootstrap) chỉ có kích thước 24.0 KB.

Nhưng khi mình lưu file này về và chạy trên localhost thì nó có kích thước lên đến 121.2 KB.
Chuyện gì đã xảy ra vậy? Mọi người giải đáp giúp mình với!!!

Vì host của họ bật CSS compression, khi đó server sẽ nén file lại trước khi gửi, đến trình duyệt thì nó lại giải nén ra và apply CSS như bình thường. Bạn có thể thử zip file bạn lưu về sẽ được 1 file nén gần bằng với file mà trình duyệt nhận ngay. Nếu muốn config local host thì tìm với từ khóa: enable apache gzip compression

4 Likes

Okay! Cảm ơn bạn rất nhiều. Mình sẽ google để tìm hiểu thêm vấn đề này. :grinning: :grinning: :grinning:

Tư vấn thêm cho chủ thớt:

Thay vì bạn sử dụng bootstrap bằng cách tải về thì sử dụng CDN thì paste code sau trong thẻ head(html):

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

Thế thì nó lấy luôn cái bootstrap.min.css từ địa chỉ web luôn chứ không cần tải gì về cho tiết kiệm băng thông

P/s: mong các mod xem xét

1 Like

Cảm ơn bạn nhiều lắm. Mình thì cần tải về để vọc vạch chỉnh sửa này nọ nữa. Đó giờ chưa biết cái vụ CSS compression nên mới lên đây hỏi.

Em link CDN thì nó vẫn tải Bootstrap về client rồi mới chạy thôi. Không có chuyện không down gì cả. Chuyện không download gì là do browser đã download file về rồi cache lại
Dù vậy nếu đưa project ra production sẽ gặp khá nhiều trường hợp không lường trước được (mạng chậm, bị chặn CDN, thậm chí xấu nhất - ít xấy ra nhất: server CDN sập)
Nếu chỉ muốn demo, làm project để test thì link CDN như em làm thì OK. Còn làm project thực tế người ta cài Bootstrap (npm, bower, nuget,…) hay download Bootstrap về add thủ công

4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?