Tại sao
JavaScript, giống như hầu hết các ngôn ngữ khác, là ngôn ngữ đòi hỏi các nhà phát triển sử dụng cấu trúc tốt khi viết nó - một cấu trúc đòi hỏi việc sử dụng các ngắt dòng, thụt đầu dòng và comment. Nếu không nó trở nên khó để duy trì.
Vấn đề với ngắt dòng, thụt đầu dòng (phím space hoặc tab) và comment sẽ thêm vào trọng lượng của tập tin. Hãy nhớ rằng ngắt dòng, tab và không gian cũng là những ký tự mặc dù không được nhìn thấy. Khi phân tích các trình duyệt JavaScript chúng không sử dụng những ký tự phụ cho bất cứ điều gì - chúng cũng bỏ qua tất cả comment trong các mã.
Ví dụ
Xem xét tập tin JavaScript với nội dung sau:
// Does something with the selected ID
function DoSomething(id) {
if (id == 0) {
alert('Id is invalid');
}
}
Khi trình duyệt phân tích các tập tin trên, nó thực sự chỉ cần dòng tiếp theo này để làm đúng như vậy:
function DoSomething(id){if(id==0){alert('Id is invalid')}}Nếu chúng ta có thể cung cấp trình duyệt với các tập tin thứ hai thay vì là đầu tiên, kích thước tải về sẽ ít hơn 50%. Tùy thuộc vào số lượng bình luận và khoảng trắng trong các tập tin JavaScript, mong đợi mileage của bạn thay đổi. Điều quan trọng là chúng ta cần phải viết theo phong cách của các ví dụ đầu tiên cho bảo trì, nhưng phục vụ ví dụ thứ hai cho trình duyệt để thực hiện.
Những rắc rối với giảm tải JavaScript là nếu bạn quên một số dấu chấm phẩy, bạn sẽ có thể kết thúc với rất nhiều lỗi JavaScript trên trang web của bạn sau khi tinh giảm.
Làm thế nào để giảm bớt JavaScript
Có một vài cách khác nhau để giảm bớt tập tin JavaScript trong ASP.NET. Phổ biến nhất là:
- Sử dụng công cụ dẫn
- Sử dụng công cụ tự động
- Sử dụng trình xử lý HTTP
Sử dụng công cụ dẫn
Trước khi trang web được triển khai đến môi trường mới, bạn có thể chạy công cụ giảm tải như
JSMin hoặc trực tuyến như
Minify JS. Bằng cách chạy công cụ thủ công, kiểm soát tuyệt đối trong quá trình này và có thể xác minh rằng mã không bị hỏng. Vấn đề là nó rất tốn thời gian và bạn cần phải làm một bài kiểm tra đầy đủ của JavaScript trước khi triển khai.
Lý do tại sao bạn cần phải kiểm tra JavaScript sau khi giảm do mã bây giờ là khác hơn so với khi bạn đã viết nó và thử nghiệm nó tại local.
Sử dụng công cụ tự động
Bởi giảm dung lượng như một phần của quá trình xây dựng, giúp bạn tiết kiệm thời gian làm nó bằng tay. Có rất nhiều bài báo trực tuyến về cách sử dụng
JSMin hoặc
YUI Compressor với MSBuild, Nant và hầu hết các hệ thống xây dựng khác. Ngay cả khi bạn tiết kiệm thời gian làm nó bằng tay, bạn vẫn cần phải kiểm tra tất cả mọi thứ trên một lần nữa bởi vì mã JavaScript là khác hơn so với trên máy tính của bạn.
Sử dụng trình xử lý HTTP
Đây là lựa chọn duy nhất đòi hỏi mã để chạy bên trong dự án trang web của bạn trong thời gian chạy. Lợi thế là bởi giảm JavaScript trong thời gian chạy, bạn phục vụ chính xác mã JavaScript cùng cho trình duyệt trên phát triển và môi trường. Điều đó sẽ giúp bạn tiết kiệm rất nhiều gỡ lỗi cuối cùng, nhưng yêu cầu thêm mã trong web.config.
Bởi vì các phương thức xử lý HTTP loại bỏ các nguy cơ sử dụng JavaScript khác nhau trên môi trường phát triển và trực tiếp, đây là cách tiếp cận nên.
Lưu ý: Khi sử dụng HTTP handler bạn cần phải áp dụng output cachin để giảm.
Thực thi các cú pháp chính xác
Khi xảy ra giảm tự động, có một (lớn) thay đổi của JavaScript sẽ phá vỡ và gây ra lỗi trong trình duyệt nếu cú pháp là không đúng. Quên dấu chấm phẩy không phải là một vấn đề cho các trình duyệt hiện nay, nhưng sau khi giảm mã JavaScript sẽ được một dòng duy nhất và điều đó sẽ gây ra vấn đề.
Nó có thể giải quyết được khó khăn để gỡ lỗi và tìm ra nơi lỗi, nhưng may mắn là tiện ích Visual Studio miễn phí có thể sử dụng. Nó được gọi là
JSLint.VS và tích hợp vào menu của Visual Studio và bạn thậm chí có thể gọi nó để chạy trên thời gian biên dịch, do đó bạn nắm bắt mọi lỗi.
Kết luận
Nếu bạn muốn giảm bớt tập tin JavaScript, tất cả bạn cần làm là
tải về, sao chép nó vào thư mục bin của trang web bạn và thêm dòng sau vào web.config của bạn:
IIS 6
<add verb="*" path="*.js" type="WebOptimizer.Handlers.JavaScriptHandler, WebOptimizer" validate="false" />
Bạn sẽ phải chắc chắn rằng IIS gửi. Yêu cầu tập tin js để động cơ ASP.NET để làm việc này.
IIS 7
<add name="JavaScriptHandler" verb="*" path="*.js" type="WebOptimizer.Handlers.JavaScriptHandler, WebOptimizer" resourceType="Unspecified" />