Giảm dung lượng CSS sẽ làm site của bạn load nhanh hơn, đó là điều ai cũng biết, minify là một cách làm rất thông dụng. Tuy nhiên nếu sau khi minify mà bạn vẫn chưa hài lòng, hãy đặt ra câu hỏi là ? Tại sao ở trang home và vẫn phải load css cho các element chỉ tồn tại ở trang single ? Đúng vậy, nếu bạn đang đi tìm lời giải cho bài toán giảm dung lượng CSS, thì đây bạn đang đi đúng hướng.
Vì mục đích đơn giản, mà ta đưa tất cả CSS cho tất cả element trên nhiều trang về cùng một file, đối với các site mà tỉ lệ sử dụng lại các element cao thì không ảnh hưởng nhiều, Nhưng nếu website có sự khác biệt lớn giữa các trang ( như theme Sen Việt đang sử dụng ) thì tỉ lệ css định nghĩa cho các element không hiển thị là rất lớn. Vì vậy phải loại bỏ những CSS của những element không hiển thị ở trang hiện tại.
Kiểm tra tỉ lệ CSS
Bạn có thể sử dụng công cụ Chrome DevTools để đánh giá tỉ lệ css không sử dụng tới. Cách sử dụng đơn giản :
- Dùng chrome truy cập vào website của bạn.
- Bấm f12, giao diện DevTool sẽ hiện lên.
- Chọn tab audits
- Click vào nút ‘Run’
Sau một hồi phân tích, bạn sẽ thấy được kết quả như trong hình dưới đây :
Như bạn thấy, đây có tới 1389 selector dùng để định nghĩa cho các element không tồn tại trong trang hiện tại, những file bạn thấy để 100% này thực ra là những file chỉ có vài dòng css thôi, quan trọng là file default.css, file này dung lượng lớn và có tới 86% css không cần thiết, đa số css không cần thiết nằm trong file này. Nếu click vào mũi tên ở bên trái, bạn sẽ thấy chrome liệt kê ra những css không cần thiết, bạn có thể search và xóa nó đi một cách thủ công, nhung tin chắc rằng nó rất lâu.
Cách giảm CSS bằng PurifyCSS
PurifyCSS là gì ?
PurifyCSS là một plugin của nodejs, dùng để loại bỏ các css không sử dụng trong một hoặc một vài trang nhất định. Nó parse các element có trong trang, và xử lý file css để chỉ giữ lại những css cần thiết. Nó cũng tích hợp chức năng minify. nên bạn có thể remove và minify cùng lúc.
Nó không chỉ hoạt động với các element tính ( các element được add khi server trả về cho browser ) mà còn hoạt động tốt với các element được add bằng javascript, Theo tác giả, thì plugin này cũng hoạt động tốt với jQuery, Angular, ReactJs. Bạn có thể test thêm với BackboneJs hoặc bất cứ thứ gì khác và report lại cho tác giả.
Theo số lượng commit trên github, thì tác giả của plugin này là Kenny Tran và là người Việt Nam. Rất thú vị, nhưng Kenny đang sống ở San Francisco, CA.
Cài đặt purifyCSS
Vì đây là plugin của nodejs, nên trước hết bạn phải cài đặt nodejs.
- Truy cập vào trang chủ của nodeJS và tải về file cài đặt.
- Cài đặt như các phần mềm bình thường khác
- Sau khi cài xong, mở cmd lên và thử : node –version
Cài xong nodejs, giờ cài purifyCss rất đơn giản.
- Tạo thư mục tại một nơi bất kỳ và đặt tên là purifyMyCss
- Giữ phím shift + right mouse, sau đó chọn ‘Open command window here’
- Gõ và lệnh : npm install purify-css
Khi cài đặt xong bạn sẽ thấy có thư mục node_modules xuất hiện. Đây là thư mục chứa mã plugin. Nhưng chúng ta đừng động gì tới nó nhé.
Lấy nội dung và css của website
Ở bước này, bạn cần lấy code html của website của bạn, purifyCSS sẽ sử dụng code này để xác định css nào cần giữ lại, css nào không. Bạn có thể lấy code 1 trang nếu bạn chỉ muốn lọc css cho một trang đó thôi, nếu muốn nhiều trang, thì bạn phải lấy code html của nhiều trang.
Bạn tạo thư mục tên html và lưu các file html của bạn vào đó, Cách lưu tốt nhất là bạn view-source của website và chép mã nguồn này về.
Sau khi có nội dung html, bạn cần nội dung file css, đơn giản thôi, tải file css của bạn về. Ở đây mình lưu file css của mình với tên default.css. Và chuyển qua bước tiếp theo là goi plugin để remove css
Remove css không sử dụng.
Bạn tạo file app.js với nội dung :
var purify = require( 'purify-css' );
purify( [
'C:\\Users\\Nguye\\Desktop\\clearCss\\html\\test.html'
], [
'C:\\Users\\Nguye\\Desktop\\clearCss\\default.css'
], {
output: 'C:\\Users\\Nguye\\Desktop\\clearCss\\output.css',
rejected: true,
info: true,
minify: false
}
);
Dòng đầu tiên là để nodejs load plugin purify-css, nạo vào biến puriry. Sau đó gọi hàm purify với ba tham số lần lượt :
- Array hoặc string : Là mảng các đường dẫn tới file html hoặc nếu là string thì phải là nội dung html.
- Array đường dẫn tới các file css hoặc nếu là string thì là code css
- Phần option :
- minify : true nếu muốn minify file output
- output : Đường dẫn tới nơi bạn muốn lưu file output
- info : hiển thị thông tin về kết quả sau khi remove.
- rejected : Log lại những rule nào đã bị bỏ qua ( không xét đến khi remove css )
Giờ mở cmd tại thư mục này và chạy lệnh :
1 | node app.js |
Và dưới đây là kết quả audit sau khi đã loại bỏ các css không cần thiết. Thật đáng kể đúng không, Dung lượng file đã giảm 136kb, từ 174kb xuống 38kb. Dù google báo rằng còn 60% không sử dụng tới, nhưng kết quả này cũng rất đáng giá rồi đúng không ?
Lời kết
Plugin này cũng không thực sự hoàn hảo, mình đã test nhiều lần, và thực tế thì nó không loại bỏ hết được những css không dùng tới, đôi khi nó remove luôn những css đã dùng tới. Vì vậy khi sử dụng, bạn phải cẩn thận kiểm tra nhiều lần để không ảnh hưởng tới hoạt động của Website.
Nhưng dù sao, đây cũng là một thư viện rất hữu ích, và dường như có khá nhiều người mong đợi nó, điều đó thể hiện qua số lượng star, fork và pr trên github. Tin rằng trong tương lai plugin này sẽ hoạt động chính xác hơn nữa.
Nhưng trong lúc đó, chúng ta có thể nghĩ tới một giải pháp có thể cho kết quả chính xác hơn, đó là sử dụng lõi xử lý css, js của chromium để process một website hoàn chỉnh, nhờ vậy bạn có thể biết chính xác những css nào không dùng tới, thậm chí bạn còn có thể tối ưu css cho trang hiện tại. Nếu làm được điều đó, thì thật tuyệt vời. Hãy thử nhé.
Nguồn : senviet.org
0 nhận xét:
Đăng nhận xét