Tối ưu dung lượng các tập tin JS và CSS với Minify

Minify là một thư viện được viết bằng PHP5 giúp kết hợp nhiều tập tin Javascript, CSS lại thành một; nén và đảm bảo chúng được cache tại client.

Minh họa tác dụng của Minify.

Trước:

và sau khi áp dụng:

Để sử dụng, bạn cần download thư viện này tại http://code.google.com/p/minify/downloads/list, phiên bản mới nhất là 2.1.5. Sau đó giải nén và copy thư mục min vào dự án của bạn. Bạn nên đặt thư mục min này sao cho nó có thể dễ dàng truy xuất đến các tập tin js và css.
Để tên thư mục được rõ ràng, tôi đổi min thành minify. Cấu trúc thư mục dự án của tôi có dạng (Zend Framework):

|---public
|---js
|---css
|---minify
|---lib
|---config.php
|---groupsConfig.php
|---index

Bạn mở file groupsConfig.php lên và thêm vào các đường dẫn tập tin js, css trong mảng có sẵn. Ví dụ:

<!--?php
return array(
'js' =--> array(
'../js/jquery-1.7.2.min.js',
'../js/jquery-ui-1.8.18.custom.min.js',
'../js/kendo.web.min.js',
),
'css' => array(
'../css/kendo.common.css',
'../css/kendo.blueopal.css',
'../js/jquery.jqGrid-4.3.2/css/ui.jqgrid.css',
)
);

Trong tập tin html, bạn thêm hai thẻ <link> và <script> theo dạng:

<link rel=""stylesheet"" href=""/minify/g=css"" type=""text/css"">

<script type=""text/javascript"" src=""/minify/g=js""></script>

Trong đó, cú pháp g=js là cách xác định đến nhóm (hay phần tử) có tên js trong mảng trả về mà bạn định nghĩa trong tập tin groupsConfig.php. Như vậy bạn có thể định nghĩa nhiều nhóm tập tin javascript, css khác nhau cho mỗi trang khác nhau.

Tìm hiểu chi tiết hơn về thư viện này tại: http://code.google.com/p/minify/