Cách giảm thiểu JavaScript – Các công cụ và phương pháp được đề xuất

Hầu hết người dùng đều mong muốn có trải nghiệm duyệt web thanh lịch và JavaScript từ lâu đã trở thành mục tiêu yêu thích của các nhà phát triển để cung cấp trải nghiệm nâng cao này.

Tuy nhiên, JavaScript không chỉ ở đó để làm cho các trang web trông đẹp hơn. Nó cũng ảnh hưởng trực tiếp đến hiệu suất và sự thành công của trang web. Tăng tốc trang web hoặc cắt giảm thời gian tải trang – hai khái niệm cốt lõi để phát triển JavaScript – là những yếu tố quan trọng để cải thiện trải nghiệm người dùng.

Nếu bạn đang tìm cách nâng cao hiệu suất trang web của mình trong thời gian ngắn nhất, bạn cần phải làm quen với việc rút gọn JavaScript. Nó sẽ giúp bạn loại trừ tất cả các ký tự không cần thiết khỏi mã nguồn JavaScript của bạn mà không làm thay đổi chức năng của nó. Hơn nữa, nó sẽ làm giảm thời gian tải trang web của bạn và sử dụng băng thông.

Việc rút gọn JavaScript có thể khá phức tạp. Trong bài viết này, chúng tôi sẽ lập sơ đồ một khóa học để hỗ trợ bạn giảm thiểu mã JavaScript của bạn cho các trang web WordPress và không phải WordPress.

JavaScript là gì?

JavaScript là một ngôn ngữ kịch bản hướng văn bản để tạo các trang web tương tác trên cả phía máy khách và máy chủ. Đó là một ngôn ngữ đơn giản và ít phức tạp hơn hầu hết, điều này giải thích cho việc sử dụng rộng rãi của nó.

Trong khi HTML và CSS xây dựng cấu trúc trang web, JavaScript bổ sung các tính năng phức tạp mang lại tính tương tác cho trang web của bạn để thu hút người dùng. Ví dụ: JavaScript cung cấp các yếu tố phức tạp như máy hát tự động video cuộn, video 2D / 3D và bản đồ tương tác.

Đáng chú ý, các trình duyệt web có thể hiểu JavaScript. Do đó, cùng với HTML và CSS, đây là một lựa chọn thành thạo nếu bạn quan tâm đến phát triển web. Nếu bạn cần tạo một trang web có tính tương tác cao chạy trên tất cả các trình duyệt mà không gặp bất kỳ trở ngại nào, thì JavaScript là lựa chọn đáng tin cậy nhất mà bạn có thể sử dụng.

Code Minification là gì?

Minification hay còn được gọi là sự giảm thiểu. Rút gọn mã có nghĩa là tối ưu hóa mã để tiết kiệm dung lượng, giảm thời gian tải trang và giảm mức sử dụng băng thông trang web. Tuy nhiên, mối quan tâm lớn nhất là giảm thiểu mã mà không làm thay đổi chức năng.

Có thể rút gọn mã trong tất cả các công nghệ lập trình cốt lõi, bao gồm HTML, CSS và – như chúng ta sắp thấy – JavaScript. Tuy nhiên, quá trình này không diễn ra ngay lập tức. Một số công việc đi vào việc làm cho mã trở nên nhỏ gọn hơn trong khi vẫn giữ cho nó hoạt động.

Để rút gọn mã JavaScript, bạn phải phân tích cú pháp, nén nó và lấy đầu ra. Một khi nó đã được thu nhỏ, nó sẽ gần như không thể đọc được bằng mắt thường. Bạn đã xóa tất cả các khoảng trắng không cần thiết, nhận xét, ký tự dòng mới và mọi thứ mà ban đầu làm cho mã dễ đọc.

Bạn cũng có thể phải thực hiện thêm một số thay đổi đối với mã – ví dụ: nội tuyến các hàm, xóa dấu phân cách khối, sử dụng điều kiện ngầm định hoặc viết lại các biến cục bộ.

Ví dụ về mã JavaScript không được hợp nhất và được thu nhỏ

Hãy cùng xem qua một số mã mẫu. Khối đầu tiên này là JavaScript thông thường, chưa được hợp nhất:

// program to check if the string is palindrome or not function checkPalindrome(str) { // find the length of a string const len = string.length; // loop through half of the string for (let i = 0; i < len / 2; i++) { // check if first and last string are same if (string[i] !== string[len - 1 - i]) { return 'It is not a palindrome'; } } return 'It is a palindrome'; } // take input const string = prompt('Enter a string: '); // call the function const value = checkPalindrome(string); console.log(value);

Bây giờ, chúng ta hãy xem mã tương tự đó trông như thế nào sau khi nó được thu nhỏ:

function checkPalindrome(n){const t=string.length;for(let n=0;n<t/2;n++) if(string[n]!==string[t-1-n])return"It is not a palindrome";return"It is a palindrome"} const string=prompt("Enter a string: "), value=checkPalindrome(string);console.log(value);

Như bạn có thể thấy, khối mã thứ hai nhỏ và gọn hơn nhiều. Điều đó có nghĩa là nó sẽ tải và hiển thị nhanh hơn, giảm thời gian tải trang và tăng tốc nội dung.

Ở đây, chúng tôi đã giảm 529 byte xuống còn 324 byte, đạt được 205 byte dung lượng trống và giảm tải trang gần 40%.

Nó giống như lấy một cuốn sách 529 trang và cô đọng nó thành một cuốn sách 324 trang. Tất nhiên, con người sẽ phải vật lộn để đọc nó, nhưng một cỗ máy sẽ chạy nhanh qua nó mà không gặp vấn đề gì.

Khi kết nối nhiều tệp JavaScript thành một tệp được rút gọn riêng lẻ, việc rút gọn mã sẽ giảm số lượng yêu cầu HTTP đến máy chủ. Điều này cũng làm giảm mức tiêu thụ băng thông của trang web. Hơn nữa, việc rút gọn mã làm giảm thời gian chạy tập lệnh – tất cả những thứ làm giảm Thời gian đến từng Byte đầu tiên (TTFB) của bạn.

Tại sao bạn nên giảm thiểu mã JavaScript?

Trong khi viết mã ban đầu, hầu hết các nhà phát triển chủ yếu tập trung vào việc hoàn thành công việc. Trên con đường đó, họ có xu hướng sử dụng nhiều nhận xét, khoảng cách và các biến để làm cho mã dễ đọc hơn cho những người khác làm việc với nó trong tương lai.

Mặc dù là một ngôn ngữ lập trình tuyệt vời, JavaScript tác động đến các trang web bằng cách làm chậm chúng. Để lấy lại không gian và cải thiện tốc độ tải trang của bạn, bạn phải giảm thiểu mã JavaScript.

Phiên bản rút gọn của mã JavaScript có thể giảm kích thước tệp xuống tới 30–90%. Do đó, việc rút gọn JavaScript đã trở thành một nghi thức quen thuộc đối với tất cả các nhà phát triển.

Mọi nhà phát triển Thư viện JavaScript lớn (Angular, Bootstrap, v.v.) đều cung cấp phiên bản JavaScript rút gọn để triển khai sản xuất. Và mỗi cái sử dụng một phần mở rộng min.js để chỉ ra điều này.

Lợi ích của việc giảm thiểu mã JavaScript

Dưới đây là một phác thảo ngắn gọn về những lợi ích bạn sẽ đạt được sau khi sử dụng việc rút gọn JavaScript:

• Giảm thời gian tải trang
• Tiêu thụ ít băng thông hơn trên trang web của bạn
• Thời gian thực thi tập lệnh thấp hơn
• Ít yêu cầu HTTP hơn đến (và tải nhẹ hơn) máy chủ
• Bảo vệ trộm cắp (các phiên bản thu nhỏ hoặc chưa xác minh rất phức tạp để đọc và lấy cắp để sử dụng lại)

Sự khác biệt giữa tối thiểu hóa, xóa bỏ hợp nhất và nén JavaScript

Tính năng thu nhỏ, hủy hợp nhất hoặc nén JavaScript tương tự nhau về chức năng của chúng. Tuy nhiên, chúng có những mục đích khác nhau.

JavaScript uglification viết lại mã để làm cho nó ít người đọc hơn. Quá trình loại bỏ khoảng trắng, dấu chấm phẩy và nhận xét trong khi đổi tên các biến và hàm nội tuyến để làm cho mã khó đọc.

JavaScript có một thư viện được gọi là UglifyJS để tự động xác minh mã. Nó cải thiện hiệu suất và giảm khả năng đọc để làm cho mã an toàn và ít hấp dẫn hơn đối với kẻ trộm.

Nén không giống như quá trình thu nhỏ hoặc không phù hợp. Nó sử dụng một thuật toán nén như GZIP để viết lại mã thành định dạng nhị phân, làm cho nó nhỏ hơn và tải nhanh hơn nhiều.

Trong khi việc thu nhỏ có nghĩa là giảm khoảng trắng và nhận xét, việc khử hoàn toàn mã sẽ biến mã thành dạng không thể đọc được bằng cách thay đổi tên hàm, tên biến, v.v. Và nén sẽ viết lại mã dưới dạng nhị phân để giảm kích thước tệp.

Cả quá trình thu nhỏ và nén đều có thể đảo ngược được, có nghĩa là bạn có thể quay lại mã về dạng ban đầu của nó, nhưng không thể thay đổi được quá trình hủy chỉnh sửa.

Cách giảm thiểu mã JavaScript

Bạn có thể rút gọn mã JavaScript của mình theo nhiều cách khác nhau. Mỗi phương pháp này có một cách tiếp cận khác biệt với những phương pháp khác.

Gần như không thể rút gọn tất cả các mã trong các tệp JavaScript lớn theo cách thủ công. Việc thu nhỏ các tệp JavaScript theo cách thủ công chỉ có thể thực hiện được đối với các tệp nhỏ vì nó rất tốn thời gian.

Để bắt đầu quy trình thu nhỏ JavaScript thủ công, bạn sẽ mở tệp JavaScript của mình trong trình soạn thảo văn bản yêu thích của bạn và xóa tất cả các khoảng trắng theo cách thủ công lần lượt. Sẽ mất vài phút để xóa tất cả các khoảng trắng và nhận xét đã được đặt cho tệp JavaScript. Một số trình soạn thảo văn bản này thậm chí có thể hỗ trợ các biểu thức chính quy, điều này có thể tăng tốc quá trình một cách đáng kể.

Tùy chọn khác là cài đặt các công cụ thu nhỏ trên máy tính của bạn và sử dụng chúng từ dòng lệnh. Bạn phải chọn tệp bạn muốn thu nhỏ và thêm tệp đó vào công tắc dòng lệnh cùng với tệp đích. Sau đó, công cụ thu nhỏ sẽ lo phần còn lại.

Cách giảm thiểu JavaScript theo cách thủ công: 5 công cụ hàng đầu

Các nhà phát triển dựa vào một số công cụ rút gọn JavaScript để rút gọn mã và đạt được hiệu suất tốt hơn. Tuy nhiên, mỗi nhà phát triển có sở thích riêng và chọn một công cụ khác nhau. Có rất nhiều công cụ rút gọn JavaScript trên mạng, tất cả đều có những phẩm chất riêng biệt, vì vậy bạn sẽ cần cân nhắc lựa chọn của mình một cách cẩn thận.

Chúng tôi không liệt kê các công cụ này theo bất kỳ xếp hạng hoặc danh mục nào. Chúng tôi chỉ đưa vào các công cụ thu nhỏ JavaScript phổ biến và hiệu quả nhất.

Dưới đây là các công cụ rút gọn JavaScript tốt nhất có thể giúp bạn nâng cao hiệu suất web của mình.

1. JSMin

JSMin là một công cụ và thư viện rút gọn JavaScript dòng lệnh chuyên dụng để giảm thiểu mã JavaScript và làm cho mã nhẹ nhất có thể. Chỉ cần cài đặt JSMin dưới dạng tập lệnh toàn cục và nó sẽ loại bỏ tất cả các khoảng trắng và nhận xét không cần thiết khỏi mã rất hiệu quả. Do đó, nó có thể ngay lập tức giảm kích thước tệp JavaScript của bạn xuống khoảng 50%.

Vì vậy, kích thước giảm xuống sẽ tạo cơ hội cho việc tải xuống nhanh chóng. Bạn cũng sẽ nhận thấy sự gia tăng trong phong cách lập trình giao tiếp hơn do chi phí tải xuống các tài liệu tự văn học mới.

Tuy nhiên, JSMin có một nhược điểm là nó không tiết kiệm tối ưu. Bởi vì thuật toán đơn giản của nó, nó để lại nhiều ký tự nguồn cấp dữ liệu dòng không thay đổi. Nếu không, nó có thể tạo ra các lỗi mới trong mã.

2. Microsoft Ajax Minify

Microsoft Ajax Minifier cho phép bạn cải thiện hiệu suất của các ứng dụng web bằng cách giảm kích thước của cả tệp JavaScript và CSS. Nó xóa các chú thích, khoảng trắng không cần thiết, dấu chấm phẩy, hàm và dấu ngoặc đơn.

Bên cạnh việc rút gọn các biến cục bộ, tên hàm, dấu ngoặc kép / dấu ngoặc kép, kết hợp khai báo biến liền kề, xóa các mã không được thực thi.

Với AjaxMin, bạn có thể phân tích năng suất và tính phí trình thu nhỏ JS trong nền. Và, khi nó hoàn thành việc thu nhỏ, bạn có thể mở thư mục năng suất.

3. Trình biên dịch đóng cửa của Google

Google Closure Compiler là một công cụ rút gọn JavaScript tuyệt vời khác. Nó xây dựng JavaScript để tải xuống nhanh và hiệu suất mượt mà hơn. Nó cũng xác minh cú pháp và các đề xuất có thể thay đổi, loại bỏ mã chết và các loại, đồng thời thông báo cho bạn về các nhược điểm của JavaScript. Công cụ này thu thập JavaScript của bạn, đánh giá nó, loại bỏ mã thừa và viết lại nó.

Ngoài ra, nó cung cấp các cảnh báo về JavaScript bất hợp pháp và các hoạt động nguy hiểm tiềm ẩn. Hơn nữa, nó là một trình biên dịch thích hợp từ JavaScript thông thường sang JavaScript tốt hơn và được rút gọn.

4. Máy nén YUI

Máy nén YUI là một công cụ rút gọn JavaScript và CSS dòng lệnh đảm bảo cho bạn tỷ lệ nén cao hơn hầu hết các công cụ khác. Đó là một công cụ thu nhỏ được viết bằng Java và dựa vào Rhino để mã hóa tệp JavaScript nguồn.

Đầu tiên, YUI kiểm tra tệp JavaScript nguồn để xác định cấu trúc của nó. Sau đó, nó in ra dòng mã thông báo. Sau đó, nó xóa càng nhiều ký tự khoảng trắng càng tốt và thay thế tất cả các ký hiệu cục bộ bằng ký hiệu 1 (hoặc 2, hoặc 3) chữ cái.

Vì YUI Compressor là mã nguồn mở, bạn có thể kiểm tra mã nguồn để tìm hiểu cách thức hoạt động của nó. Ngoài ra, YUI là công cụ thu nhỏ JavaScript an toàn nhất với tỷ lệ nén cao.

5. UglifyJS

UglifyJS là một trong những công cụ thu nhỏ JavaScript phổ biến nhất. Nó có thể phân tích cú pháp, rút gọn và nén mã JavaScript. Bên cạnh đó, công cụ tạo tệp bản đồ nguồn trong khi nén để theo dõi trở lại mã gốc của bạn.

Ngoài ra, nó có thể nhận nhiều tệp đầu vào đồng thời, trước tiên sẽ phân tích cú pháp các tệp đầu vào, sau đó phân tích cú pháp các tùy chọn.

UglifyJS phân tích cú pháp các tệp đầu vào theo thứ tự và áp dụng bất kỳ tùy chọn nén nào. Các tệp được phân tích cú pháp trong cùng một phạm vi toàn cục, có nghĩa là một tham chiếu từ tệp này đến một biến / hàm được khai báo trong tệp khác sẽ được khớp một cách thích hợp.

Cách thu nhỏ JavaScript tự động: 5 công cụ trực tuyến hàng đầu

Có rất nhiều trình thu nhỏ JavaScript trực tuyến để nén mã của bạn trực tuyến. Hầu hết tất cả các công cụ thu nhỏ JavaScript trực tuyến đều tuân theo một quy trình thu nhỏ tương tự.

Trước tiên, bạn sẽ sao chép và dán mã nguồn JavaScript của mình hoặc tải tệp mã nguồn lên công cụ. Sau đó, bạn sẽ tối ưu hóa cài đặt của công cụ thu nhỏ để có được đầu ra dựa trên yêu cầu cụ thể nếu có các tùy chọn.

Cuối cùng, bạn sẽ lấy tệp được rút gọn đó và sử dụng trên trang web thay vì mã mở rộng, ban đầu (mặc dù bạn nên giữ tệp mã nguồn ban đầu trong bảo mật, đề phòng).

Dưới đây là 5 công cụ Khai thác JavaScript trực tuyến tốt nhất có thể giúp bạn nâng cao hiệu suất web của mình. Mặc dù chúng tôi không liệt kê các công cụ này theo bất kỳ thứ tự hoặc danh mục cụ thể nào, chúng tôi chỉ đưa vào các giải pháp thu nhỏ JavaScript phổ biến và hiệu quả nhất.

1. Toptal JavaScript Minifier

Toptal JavaScript Minifier cung cấp một trình thu nhỏ JavaScript trực tuyến hiệu quả nhưng đơn giản, nơi bạn có thể cô đọng JavaScript của mình trong vòng vài giây. Nó cũng cho phép bạn chuyển đổi mã thành tệp .js để sử dụng trong tương lai.

2. JSCompress

JSCompress có thể thu nhỏ và giảm 80% kích thước JavaScript của bạn. Nó cung cấp một giao diện nhấp và di chuyển đơn giản, nơi bạn có thể dán mã của mình hoặc tải lên tệp .js của bạn để thu nhỏ. Bạn sẽ nhận được đầu ra được rút gọn dưới dạng mã sạch, có thể sao chép thay vì tệp .js . Đáng chú ý, công cụ này sử dụng UglifyJS và Babel-minify để rút gọn và nén JavaScript.

3. Minifier.org

Minfier.org là một trong những trình thu nhỏ JavaScript đơn giản nhất mà bạn có thể sử dụng để rút gọn mã của mình. Nó sử dụng nhiều phương pháp để rút gọn mã JavaScript. Công cụ cân nhắc kích thước của mã JavaScript của bạn cả trước và sau khi thu nhỏ. Sau đó, nó tính toán độ lợi của tập lệnh sau khi thu nhỏ và hiển thị nó trên màn hình.

4. TutorialsPoint Online JavaScript Minifier

Bạn có thể nhập tệp .js , cung cấp URL hoặc dán trực tiếp mã thô của bạn vào công cụ trình thu nhỏ JavaScript TutorialsPoint. Công cụ có một trường có thể chỉnh sửa để viết mã trực tiếp nếu bạn muốn. Ngoài ra, nó có tùy chọn thu nhỏ bằng một cú nhấp chuột và bạn có thể tải xuống mã được thu nhỏ trong tệp .js .

5. Trình đóng gói: Dean Edwards JavaScript Compressor

Nếu bạn cần nén mã JavaScript của mình, Packer của Dean Edwards có thể cung cấp cho bạn một trong những trải nghiệm nén JavaScript trực tuyến hài lòng nhất. Nó hoạt động với mã thông báo / nguyên tử JavaScript và các mẫu bit và byte.

Bên cạnh đó, nó cho phép bạn triển khai tùy chọn mã hóa Base62 và thu nhỏ các biến trong khi thu nhỏ mã của bạn. Để giảm thiểu mã JS của bạn, hãy sao chép và dán nó vào JavaScript và nhấn nút đóng gói. Nó sẽ tự động tạo mã rút gọn cho bạn.

Cách giảm thiểu JavaScript trong WordPress: 5 công cụ và plugin hàng đầu

Việc rút gọn JavaScript tuân theo một quy trình khác trong WordPress. Việc giảm thiểu JavaScript yêu cầu hỗ trợ máy chủ lưu trữ hoặc cài đặt một plugin WordPress. Sau khi cài đặt một plugin thu nhỏ WordPress, nó sẽ xử lý quá trình thu nhỏ cho bạn.

Có rất nhiều plugin WordPress rút gọn JavaScript. Hầu hết các plugin này đều tuân theo cùng một quy trình để thu nhỏ và có thể chạy từ bảng điều khiển WordPress.

Hãy cùng khám phá một số công cụ hiệu quả nhất để sửa đổi JavaScript trong WordPress:

1. Code Minification trong MyKinsta

Nếu bạn là khách hàng của Kinsta, bạn có thể sử dụng tính năng rút gọn mã của chúng tôi để giảm thiểu các tệp JS và CSS trên trang web của bạn. Tất cả những gì bạn phải làm là kích hoạt Kinsta CDN và đánh dấu vào một vài hộp kiểm trong bảng điều khiển MyKinsta của bạn. Bạn không phải cài đặt bất kỳ plugin nào của bên thứ ba – các tệp của bạn bây giờ sẽ được thu nhỏ.

Việc thu nhỏ này xảy ra trên mạng biên của Cloudflare, mạng này cũng cấp nguồn cho Kinsta CDN. Tất cả các tệp được rút gọn của bạn cũng được lưu vào bộ nhớ đệm trên mạng của Cloudflare, chuyển thành các lợi ích hiệu suất bổ sung.

2. Tổng bộ nhớ đệm W3

W3 Total Cache cho phép bạn giảm thiểu JavaScript, CSS và HTML với khả năng kiểm soát chi tiết. Bên cạnh đó, nó cho phép bạn giảm thiểu nội tuyến, nhúng hoặc bất kỳ mã JavaScript hoặc CSS nào của bên thứ ba. Nó cũng định nghĩa JavaScript và CSS để tải trang nhanh hơn, ngoài việc thu nhỏ. Hơn nữa, các plugin cung cấp nhiều cơ hội rút gọn JavaScript cho các trang web WordPress.

3. WP-Optimize

WP-Optimize là một plugin tối ưu hóa WordPress cung cấp công cụ thu nhỏ nâng cao để giảm thiểu CSS và JavaScript cùng với việc xóa bộ nhớ cache và tối ưu hóa trang web WordPress của bạn. Ngoài ra, nó cho phép bạn trì hoãn CSS và JavaScript. Do đó, trang web tải các nội dung không quan trọng sau khi tải trang chính, cải thiện hiệu suất trang.

4. Tự động tối ưu hóa

Autoptimize là một plugin thu nhỏ WordPress tổng hợp, thu nhỏ và lưu vào bộ nhớ cache CSS và JavaScript không được tổng hợp để giảm thời gian tải trang và cải thiện hiệu suất trang web của bạn. Nó có thể rút gọn và lưu vào bộ nhớ cache các tập lệnh, nội dòng JavaScript quan trọng và không đồng bộ hóa JavaScript không tổng hợp.

Nếu bạn đang mong đợi một plugin thu nhỏ JavaScript của WordPress sẽ chủ yếu tập trung vào hiệu suất trang web của bạn, thì Autoptimize là một lựa chọn tuyệt vời.

5. Tốc độ nhanh Giảm thiểu

Fast Velocity Minify cung cấp tính năng rút gọn JavaScript, CSS và HTML nâng cao cho người dùng WordPress. Nó thực hiện việc thu nhỏ trên giao diện người dùng khi yêu cầu chưa được lưu trữ đầu tiên xảy ra. Bên cạnh đó, plugin có giao diện người dùng đơn giản và khả năng sử dụng đơn giản.

Bản tóm tắt

Để đạt được hiệu suất cao nhất từ trang web của bạn đòi hỏi phải chú ý đến các chi tiết nhỏ. Do đó, việc giảm thiểu HTML, CSS và JavaScript sẽ nhập danh sách việc cần làm của bạn về hiệu suất trang web.

Chúng tôi đã khám phá nhiều công cụ và plugin có thể hỗ trợ bạn trong việc rút gọn JavaScript. Tuy nhiên, mỗi công cụ hoặc plugin được đề cập đều phục vụ cùng một mục đích và hoạt động hiệu quả.

Dựa trên trường hợp sử dụng của bạn, hãy chọn một công cụ từ danh sách này và bắt đầu giảm thiểu mã JavaScript của bạn để có hiệu suất trang web nhanh hơn.

Chúng tôi đã bỏ lỡ bất kỳ công cụ thu nhỏ JavaScript hoặc plugin thu nhỏ WordPress nào mà bạn thích chưa? Cho chúng tôi biết trong phần ý kiến!