google+javascriptbanktwitter@js_bankfacebook@jsbankrss@jsbank






Thu gọn mã nguồn JavaScript với Google Closure Nhiều ngày trước, trong các bài viết về đề tài tối ưu hóa mã nguồn trang web để tăng hiệu suất hoạt động, jsB@nk cũng đã đề cập đến vấn đề thu gọn (nén) mã nguồn JavaScript là một trong những tiêu chí quan trọng hàng đầu. Bạn có thể xem lại các bài viết này trong các liên kết bên dưới:

- Hiệu suất của các thư viện nén JavaScript
- Thủ thuật tối ưu hóa JavaScript
- Tăng hiệu suất của JavaScript với trình nén của SharePoint
- Nén tập tin JavaScript tự động trên Apache

Hôm nay trong bài viết này, jsB@nk muốn cung cấp cho bạn thêm một bài viết chi tiết nữa hướng dẫn cách thức thu gọn mã nguồn JavaScript với công cụ Google Closure. Đây là một bài viết rất chi tiết cùng với những hướng dẫn đầy đủ kèm ảnh minh họa. Bạn vui lòng vào trang chi tiết để xem.


Miễn phí web hosting 1 năm đầu tại iPage



Nếu bạn vẫn còn đang tìm kiếm một nhà cung cấp hosting đáng tin cậy, tại sao không dành chút thời gian để thử với iPage, chỉ với không quá 40.000 VNĐ/tháng, nhưng bạn sẽ được khuyến mãi kèm với quà tặng trị giá trên 10.000.0000 VNĐ nếu thanh toán cho 24 tháng ~ 900.000 VNĐ?

Có trên 1 triệu khách hàng hiện tại của iPage đã & đang hài lòng với dịch vụ, tuyệt đối chắc chắn bạn cũng sẽ hài lòng giống họ! Quan trọng hơn, khi đăng ký sử dụng web hosting tại iPage thông qua sự giới thiệu của chúng tôi, bạn sẽ được hoàn trả lại toàn bộ số tiền bạn đã sử dụng để mua web hosting tại iPage. Wow, thật tuyệt vời! Bạn không phải tốn bất kì chi phí nào mà vẫn có thể sử dụng miễn phí web hosting chất lượng cao tại iPage trong 12 tháng đầu tiên. Chỉ cần nói chúng tôi biết tài khoản của bạn sau khi đăng ký.

Nếu muốn tìm hiểu thêm về ưu / nhược điểm của iPage, bạn hãy đọc đánh giá của ChọnHostViệt.com nhé!
Thử iPage miễn phí cho năm đầu tiên NGAY

One of the best practices to increase our site performance is to reduce the JavaScript file size and saving time for downloading it. On 5th of November 2009, Google has announced the release of Google Closure Compiler. So, what is that all about? In a nutshell, Closure Compiler is a tool that is used to rewrite our JS code to make it faster and more compact. In this post, I will go through with you, how can we build and compile our JS code with this optimizer on Windows platform.

To run the compiler on our machine, we need Java 6 or higher to be installed. If you have already had Java 6 or higher installed, just grab a Closure Compiler executable file. There are three ways for getting it:

1) The pre-built version - it can be found and downloaded at: http://code.google.com/p/closure-compiler/downloads/list

2) Check out the source and build it with Apache Ant

3) Check out the source and build it with Eclipse.

However, I will not explain into details for 2) and 3). I will use the pre-built version for compiling JS file instead. So, before we run the closure compiler, we need the executable file first. Just download the latest copy from this link. Once we have downloaded the compressed folder, extract all files and locate it in an empty folder, say 'work' folder. We should be able to see 3 files inside, as follows:

Extracted files


As what you have seen, the compiler is in executable jar file format. And, the 'README' is the guide of running this optimizer tool. Running the compiler is pretty straight-forward, just follow these steps will do:

1) Say, I would like to compress 'facebox' jQuery plugin which is not compressed and the original file size is 10KB. What I want is to reduce its file size so that my site is not taking much time for first downloading the JS file. So, what I need to do is, copy the original JS file to the 'work' folder, like so:

Facebox original file


As you can see, the original file size is 10KB in the folder.

2) Next, open the Windows' command line, and change the directory to the 'work' folder, as the screenshot shown at below:

Change to 'work' directory


We are now at the 'work' folder. To execute the compiler, type in the following command:

java -jar compiler.jar command

3) Once we pressed 'Enter', this starts the compiler in interactive mode. The next thing we need to do is to type in 'var x = 17 + 25;' , just as follows:

var x = 17 + 25; command

4) Next, hit the 'Enter' key once we are done, and then hit the 'Ctrl-Z' keys and once again, hit the 'Enter' just after the 'Ctrl-Z'. The compiler will respond to us as 'var x=42;', as shown in this following srceenshot:

The respond: var x=42;

5) OK now, basically we are able to rewrite and compile our JS file at this stage. The optimizer tool has many options to read the input file and checking our code and so on. Such as, how to compile multiple JS files, etc. However, we will focus on one file in this tutorial. To compress and reduce 'facebox' plugin file, type in and run the following command:

Recompile 'facebox' js file


To make it clearer, this command should be something like this:
java -jar compiler.jar --js facebox.js --js_output_file facebox-compiled.js

Please take note that, you are free to name the output of your JS file. In this case, I named it as 'facebox-compiled.js'.

6) Open the 'work' folder again after the command is executed, you should be able to see an additional file (facebox-compiled.js) inside the folder:

'facebox-compiled.js' file


If you have noticed, the original file size has been reduced from 10KB to 5KB, which is 50% of reduction with the file size! To see the code, open the compressed file with your preferred text-editor, you should be able to see the code has been optimized and rewritten as well as obfuscated. This will prevent visitors to read your JS code straight from their browser's 'View Source' option. Below is the example how does the code look like:

Optimized, rewritten, obfuscated JS code

To learn more about Closure Compiler, please visit: http://code.google.com/closure/compiler/docs/gettingstarted_app.html. Hope you enjoyed it.

Conclusion:
Google Closure Compiler is a powerful optimizer tool to analyze and rewritten our JS code. It will greatly reduce our file size as well. JS file size should always be concerned for the sake of the site performance.

JavaScript theo ngày


Google Safe Browsing McAfee SiteAdvisor Norton SafeWeb Dr.Web