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

PHP_Minify_logoMinify 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:

php_minify_fiddler_before

và sau khi áp dụng:

php_minify_fiddler_after

Để 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/

YinYangIt’s Blog

Advertisements

One thought on “PHP – Minify: Tối ưu dung lượng các tập tin JS và CSS

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s