Nén JavaScript và CSS, khi nào và tại sao phải làm như vậy?

Hẳn khi các bạn tham khảo các dự án hay source code của một ai đó có kinh nghiệm, có thể các bạn sẽ thấy trong source code của họ thường có các tệp tin dưới dạng như là style.min.css hay script.min.js. Vậy chữ min ở đây có nghĩa là gì? Nó chính là từ viết tắt của minify trong tiếng anh nghĩa là giảm bớt hay gọi việt nam hóa tức là nén. Vậy nén JavaScript và CSS hay minify ở đây có nghĩa là gì hay nó giúp ích gì cho chúng ta trong kỹ thuật thiết kế web hay không?

Vậy Nén JavaSript và CSS là gì?

Thuật ngữ Minify

Thuật ngữ Minify hay nói chính xác hơn phải là minify css hoặc minify js. Nghĩa của nó là làm giảm bớt dung lượng hiện có của tập tin css hay js. Cái này nghe có quen quen không? Vâng, nếu các bạn đã xem qua Kỹ thuật CSS Image Sprites trong thiết kế web chắc các còn nhớ đến mục tiêu của kỹ thuật này. Đó chính là làm giảm dung lượng của hình ảnh nhằm tiết kiệm băng thông (bandawidth) và tăng tốc độ tải của trang web.

Nếu các bạn đã từng dùng qua phần mềm WinRAR hay WinZIP thì nó cũng có chức năng tương tự là hô biến tập tin có dung lượng lớn thành dung lượng nhỏ hơn bằng phương pháp đóng gói và “nén” tập tin. Thuật ngữ “nén” rất Việt Nam ra đời là vì thế. Tuy nhiên kỹ thuật nén trong CSS hay JavaScript không bao gồm việc đóng gói tập tin mà nó chỉ đơn giản là loại bỏ các khoảng trắng dư thừa, các dấu xuống dòng hay các đoạn ghi chú,… Nhờ đó ta có được các file có dung lượng nhỏ hơn rất nhiều.

Ví dụ về Minify

Ví dụ, bình thường nếu các bạn viết như thế này:

/*
* CiOne.Vn Blog Template
* Version: 1.0
* Author: Khuyen Nguyen
* Description: 2 column, black and white, html5
*/
body {
background-color: #f5f5f5;
color: #666;
font-family: ‘Roboto’, sans-serif;
font-size: 16px;
font-weight: 300;
line-height: 1.725;
}

body{background-color:#f5f5f5;color:#666;font-family:’Roboto’,sans-serif;font-size:16px;font-weight:300;line-height:1.725;}

Toàn bộ khoảng trắng, xuống dòng, chú thích đã được loại bỏ. Đương nhiên dung lượng đã giảm một cách đáng kể (các bạn có thể tự kiểm chứng điều này). Một điều nữa là một file css hay js không chỉ có bao nhiêu đây thôi đúng không nào? Chắc chắn rằng nếu các bạn viết một trang web đơn giản thì bạn có thể sẽ không nhận thấy được sự thay đổi. Nhưng đối với các hệ thống lớn, cần rất nhiều module hay plugin thì việc nén javascript và css này lại rất có ý nghĩa. Ngoài ra nó lại còn rất tốt cho SEO vì giảm thiểu thời gian tải trang. Và như vậy, với một hành động tuy nhỏ nhưng nó lại giúp chúng ta rất nhiều đúng không?

Nhưng hãy khoan, vậy chúng ta thực hiện việc nén javascript và css như thế nào đây? Chẳng lẽ lại ngồi xóa từng dấu cách hay từng dấu xuống dòng à? Đương nhiên là không rồi, bây giờ tôi sẽ hướng dẫn các bạn cách để Minify chúng. Bảo đảm nhanh gọn và “sạch sẽ” 8-).

Hướng dẫn nén JavaScript và CSS

Thật ra có rất nhiều cách để làm việc này, hiện tại các IDE hay Editor như Bracket, Sublime Text,… đều hỗ trợ việc này rất nhanh chóng. Còn ở đây chúng ta muốn làm nhanh gọn, không phải cài đặt lằng nhằng hầm bà lằng các thứ. Vì thế để đơn giản tôi chọn http://refresh-sf.com/

Rất đơn giản là các bạn chỉ cần truy cập vào liên kết trên, một giao diện như thế này sẽ hiện ra:

Việc các bạn cần làm copy đoạn mã CSS hay JS cần “nén” vào đây (khung số 1). Nó sẽ tự động nhận diện đoạn mã bạn đưa vào là JavaScript, CSS hay HTML. Sau đó sẽ nổi bật nút nhấn tương ứng lên thành màu xanh như thế này:

Việc còn lại là bạn chỉ cần nhấn vào nút màu xanh đó và chờ đợi nó nén xong. Và thành quả ta nhận được sẽ như sau:

Việc còn lại của bạn là nhấn save để lưu file đã được nén về máy của mình để sử dụng nữa mà thôi. Nhưng hãy để ý đến khung màu đỏ ở trên. Nó cho thấy rõ được mức độ nén của tập tin (Input và Output). Còn Delta là kiểu nén gzip – kiểu nén ở phía server. Các bạn thấy nó nén được khoảng gần 4KB. Tuy là con số nhỏ nhưng hãy tưởng có khoảng 100 tập tin css và js thì con số này là khoảng 400KB. Đây là một con số lớn đối với một website cần Clean And Clear (gọn gàng và sạch sẽ). Và đó chính là lý do mà kỹ thuật này ra đời.

Kết luận

Các bạn đã được làm quen với các từ ngữ lạ cũng như biết được thêm một kỹ thuật mới mẻ nữa. Kỹ thuật “nén JavaScript và CSS”. Gọi là kỹ thuật nghe cho nó thấy “lớn lao” chứ thật ra đây chỉ là một “trick” nho nhỏ mà thôi. Các bạn nên tham khảo để áp dụng vào trong dự án của mình. Cũng có thể một số bạn nhìn thấy nút nhấn HTML ở trên sẽ thắc mắc có nén HTML hay không?

Câu trả lời tất nhiên là có, nhưng theo kinh nghiệm hiện tại của tôi thì chúng ta không nên án sử dụng phương pháp nén HTML một cách trực tiếp như thế này. Việc này sẽ thông qua các công cụ hỗ trợ. Nếu nén trực tiếp và chèn vào mã nguồn các bạn sẽ có thể gặp vấn đề về cách trình bày mã nguồn. Giờ thì các bạn hãy tự tay thực hành xem nào.