Sử dụng YUI Compressor với Visual Studio

Khi lập trình web, một trong những điều quan trọng nhất mà bạn cần phải quan tâm đó là dung lượng mỗi web response được trả về từ web server đến trình duyệt khách phải nhỏ nhất có thể để bảo đảm cho tốc độ của trang web.

Một trong những cách để giảm dung lượng trả về cho client đó là nén các Javascript file và CSS file. Yahoo đã cung cấp cho chúng ta một chương trình (viết bằng Java) để nén các file .css và .js, đó là YUI Compressor.

Chỉ cần máy tính của bạn có cài đặt JRE  thì bạn đã có thể sử dụng YUI Compressor bằng cách sử dụng dòng lệnh. (Bạn có thể search bằng Google để tìm hiểu). Nhưng .NET developers có cách hay hơn để nén file mà không cần phải lọ mọ gõ từng chữ, đó là biến YUI Compressor thành một External Tool (công cụ bên ngoài – dịch nôm na như vậy) của Visual Studio và có thể sử dụng nó bên trong Visual Studio.

Đầu tiên bạn cần download YUI Compressor và giải nén ở đâu đó.

Biến YUI Compressor thành một External Tool

Mở Visual Studio, chọn Tools -> External Tools...

Tiếp đó là thêm một tool mới với tên YUI Compressor và cài đặt một số tham số như dưới đây:

-      Title: Yui Compressor

-      Command: java.exe

-      Arguments: -jar "E:\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar" $(ItemPath) --charset "UTF8" --type js -o $(ItemFileName).min$(ItemExt)

-      Initial Directory: $(ItemDir)

-      Chọn  “Use Output Window”

Bạn đã có thể sử dụng nó và nếu như có vấn đề gì thì nó sẽ thông báo. Đầu tiên bạn sẽ chọn file *.js ở Solution Explorer. Sau đó chọn menu Tool và chọn Yui Compressor. Làm tươi (refresh) thư mục chứa file *.js của bạn và bạn sẽ thấy có thêm file *.min.js. Đó là file đã được nén.

Bạn cũng có thể làm điều tương tự để nén file CSS  bằng cách thay đổi giá trị của tham số -type thành css thay vì js.

Thêm vào Toolbar

Chọn Tools->Customize.  Sau đó chọn New…

Sau đó chọn Commands và chọn Tools

Kéo và thả External Command 1 hoặc cái là Command # nào đó tương ứng với Yui Compressor vào toolbar mà bạn mới tạo. Sau đó click vào Close (cửa sổ Customize) và bạn có thể để toolbar mới ở bất cứ nơi đâu.

Như vậy bạn đã biết được thêm một cách để làm gọn các file *.js và *.css một cách dễ dàng bằng Yui Compressor ngay bên trong Visual Studio

Lưu ý: Bài viết này được lược dịch từ blog của LavaBlast Software Blog