Nội quy chuyên mục: - Chuyên mục này chỉ sử dụng cho việc chia sẻ các tài liệu và hướng dẫn, vui lòng không đặt câu hỏi tại đây. Các thảo luận có liên quan vui lòng gửi đúng topic.
- Các tài liệu chính thức được cung cấp tại http//wiki.nukeviet.vn/technical_manual
#82709 gửi bởi anhtu
Ngày 17 Tháng 03 2011 , 13:25
Hướng dẫn tối ưu tập tin JavaScript trong mã nguồn mở NukeViet 3.x
Tác giả: VINADES.,JSC

Các tập tin JavaScript được sử dụng rộng rãi trong hệ thống mã nguồn mở NukeViet. Nó có thể là các đoạn mã giúp tạo các hiệu ứng đẹp mắt phía trình duyệt, hay tạo sự tương tác trực quan với người duyệt web... Bên cạnh đó, nó lại là một trong những tác nhân gây chậm trình duyệt, nặng website. Để vừa cảm nhận được sức mạnh của JavaScript, vừa cải thiện được tốc độ load trang, các lập trình viên của VINADES., JSC - công ty chuyên quản NukeViet đã và đang sử dụng công cụ tối ưu trực tuyến Google Closure Compiler. Bài viết này giới thiệu đến các bạn những tính năng nổi bật và cách sử dụng Google Closure Compiler cho NukeViet.

I. Các kiểu tối ưu JavaScript

Có thể chia các công cụ giúp giảm kích thước tập tin JavaScript thành 3 kiểu, căn cứ vào phương pháp mà chúng sử dụng:

1. Kiểu RegExp: Xóa các chú thích, các khoảng trắng cũng như một số “rác” khác trong mã nguồn nhờ vào các biểu thức chính quy (Regular Expressions). Đại diện tiêu biểu cho phương pháp này là công cụ JSMin.

Dưới đây là một vài website cung cấp công cụ kiểu này:
http://fmarcia.info/jsmin/test.html
http://www.crockford.com/javascript/jsmin.html

2. Mã hóa kiểu Gzip nửa vời: Nguyên lý của nó là giảm dung lượng tập tin JavaScript bằng phương pháp nén đơn giản (nén với khóa định nghĩa). Khi hiển thị trên trình duyệt, nội dung bị mã hóa sẽ được giải mã bằng hàm biên dịch eval. Nó được gọi là nửa vời bởi sử dụng phương pháp nén gzip ở mức độ thấp. Kiểu mã hóa này không được khuyến khích sử dụng ở các website có chế độ nén gzip mặc định cho các tập tin JavaScript (nén 2 lần, khiến dung lượng của nội dung được đọc còn lớn hơn so với nội dung của tập tin nguyên gốc). Ngoài ra, trình duyệt khi đọc các tập tin này sẽ lâu hơn bình thường vì phải thực hiện thêm thao tác giải mã. Công cụ nén nổi tiếng một thời Dean Edwards thuộc trường phái này (http://dean.edwards.name/packer/).

Bạn có thể truy cập website http://jscompress.com để thấy được sự khác nhau của 2 kiểu tối ưu tập tin JavaScript nêu trên.

3. Giảm kích thước tập tin bằng phương pháp tối ưu cấu trúc mã nguồn và rút gọn các ký tự.
Đây được coi là phương pháp tân tiến nhất và được ShrinkSafe, YUI Compressor, Google Closure Compiler sử dụng. Trước khi thực hiện chức năng tối ưu, các công cụ này đọc cây cú pháp của mã nguồn (syntax tree), dựa trên kết quả đạt được tiến hành thay tên của các biến cục bộ bằng tên khác ngắn gọn hơn. Cuối cùng, với cây thư mục có định dạng mới này, chúng tối ưu mã nguồn bằng cách xóa các chú thích, các khoảng trắng, viết gọn các số nguyên (1000 thành 1E3, 20000 thành 2E4).

Google Closure Compiler cũng như các công cụ tối ưu thế hệ mới khác không sử dụng các biểu thức chính quy và không tiến hành nén tập tin. Bên cạnh đó, nó vượt trội hơn so với ShrinkSafe và YUI Compressor ở phương pháp tối ưu. Trong khi YUI Compressor sử dụng phương pháp cục bộ, Google Closure Compiler tiến hành phân tích mã nguồn một cách toàn diện, lớn hơn nhiều so với ý nghĩa của từ “tối ưu”, cho ra một kết quả được coi là tốt nhất ở thời điểm hiện nay.

Công cụ trực tuyến Google Closure Compiler được cung cấp tại đây:

http://closure-compiler.appspot.com/home

II. Cách sử dụng Google Closure Compiler để tối ưu tập tin JavaScript cho NukeViet 3:

1. Tối ưu cho các lập trình viên
Tối ưu cho lập trình viên là cách tối ưu để lập trình viên có thể đọc được code dễ dàng. Ta sẽ sử dụng Google Closure Compiler tối ưu code mà vẫn giữ lại (thậm chí còn làm đẹp) cấu trúc dòng lệnh (chứ không phá hủy nó). Để làm việc này, tại công cụ Google Closure Compiler, bạn chọn các tùy chọn như sau:

Optimiztion: Simple.
Formatting: Pretty print.

anhchup-img-90.jpg


Cuối cùng, bạn chỉ cần chép nội dung tập tin JavaScript vào ô bên trái, nhấp nút Compile, code đã tối ưu sẽ được Google trả về ở phía bên phải. Google cũng sẽ tính toán luôn tỉ lệ phần trăm được tối ưu so với code gốc, thống kê các lỗi và các cảnh báo nếu đoạn mã JavaScript của bạn có vấn đề.



2. Tối ưu cho khách truy cập web

Khách truy cập web thường không quan tâm đến các dòng mã JavaScript, do đó có thể hủy cả cấu trúc dòng lệnh để việc tối ưu được cao hơn. Để làm việc này, tại công cụ Google Closure Compiler, bạn chọn các tùy chọn như sau:

Optimiztion: Simple.
Formatting: hủy hết các tùy chọn tại đây.

anhchup-img-91.jpg


Với những tính năng vượt trội và cách sử dụng dễ dàng, Google Closure Compiler sẽ được tích hợp sẵn vào các phiên bản NukeViet trong tương lai.
Đính kèm
(127.99 KB) Đã tải về 250 lần
(128.08 KB) Đã tải về 250 lần

Block "Thêm tôi vào Google+" cho NukeViet:
http://www.nguyenanhtu.net/2011/07/bloc ... eviet.html

My Google+:
https://plus.google.com/100133071209528072246/posts
#102237 gửi bởi toanbeolatao
Ngày 24 Tháng 11 2011 , 21:05
Hay quá. Thế là biết thêm một công cụ tuyệt vời để nén Javascript. Nhưng mà còn cái nén PHP nữa anh Tú ơi. Anh xem có thể share cái nén PHP của anh Thảo được không . Hoặc anh xem có công cụ nào hỗ trợ việc này thì giới thiệu cho mọi người biêt với. Em tìm mây ngày hôm nay mà chưa ra được vấn đề. Code bây giờ cứ file nén , file không nén. Trông rất là lộn xộn và không chuyên nghiệp tí nào ^_^

http://toanbeo.com - Tổng hợp các thể loại như tin tức, ebook, phần mềm, game, xem phim online ( đang trong quá trình xây dựng và phát triển ). Đặc biệt có chuyên mục Kiếm Tiền Online cực đơn giản cho tất cả mọi người http://hoitu.tk http://dichvuphoto.tk
#102250 gửi bởi anhtrangxua5
Ngày 24 Tháng 11 2011 , 21:32
Quá tuyệt, các file js nén xong thấy giảm 40% dung lượng, thanks anh tú, thanks vinades

không biết http://closure-compiler.appspot.com/home có nén được file css ko ???

Cuộc sống chỉ có một điều đáng được gọi là thành công, đó là sống và bước đi trên con đường mình đã chọn
#102360 gửi bởi anhtu
Ngày 25 Tháng 11 2011 , 10:22
toanbeolatao đã viết:Hay quá. Thế là biết thêm một công cụ tuyệt vời để nén Javascript. Nhưng mà còn cái nén PHP nữa anh Tú ơi. Anh xem có thể share cái nén PHP của anh Thảo được không . Hoặc anh xem có công cụ nào hỗ trợ việc này thì giới thiệu cho mọi người biêt với. Em tìm mây ngày hôm nay mà chưa ra được vấn đề. Code bây giờ cứ file nén , file không nén. Trông rất là lộn xộn và không chuyên nghiệp tí nào ^_^


Hi.
Trong php có 1 function dùng để tối ưu mã nguồn php:
Mã: Chọn hết
php_strip_whitespace ( $filename )


Trong đó $filename là đường dẫn đến file .php cần tối ưu

Block "Thêm tôi vào Google+" cho NukeViet:
http://www.nguyenanhtu.net/2011/07/bloc ... eviet.html

My Google+:
https://plus.google.com/100133071209528072246/posts
#102361 gửi bởi anhtu
Ngày 25 Tháng 11 2011 , 10:24
anhtrangxua5 đã viết:Quá tuyệt, các file js nén xong thấy giảm 40% dung lượng, thanks anh tú, thanks vinades

không biết http://closure-compiler.appspot.com/home có nén được file css ko ???


Không bạn.
Nó chỉ dành cho JavaScript.
Nếu bạn muốn tối ưu và nén CSS, hãy vào đây:
http://nukeviet.vn/vi/nvtools/csscompiler/

Block "Thêm tôi vào Google+" cho NukeViet:
http://www.nguyenanhtu.net/2011/07/bloc ... eviet.html

My Google+:
https://plus.google.com/100133071209528072246/posts
#102431 gửi bởi nguyenngocphuongnb
Ngày 26 Tháng 11 2011 , 06:31
Không hiểu em nén xong thì nó lại báo lỗi anh ạ, em đã thử các kiểu nén rồi, từ đơn giản đến nâng cao, khi chép đoạn nén vào trình soạn thảo nó đều báo lỗi, chạy thử thì lỗi thật, có một số tệp bị thôi ạ

tài liệu, bài giảng ôn thi đại học toán, lý, hóa, sinh, tiếng anh http://gstt.vn