HomeLập trìnhJavaScriptJavaScript Minify –...

JavaScript Minify – Giảm thiểu JS bằng Công cụ khai thác hoặc jsmin


Bạn có thể thắc mắc – rút gọn là gì và nó cải thiện các ứng dụng JavaScript của bạn như thế nào? Bạn có thể sử dụng những công cụ nào để thu nhỏ JS của mình? Tôi sẽ trả lời những câu hỏi này trong bài viết này.

Giảm thiểu là gì?

Thu nhỏ là quá trình “thu nhỏ” mã bằng cách loại bỏ các phần không liên quan của mã. điều này như thế nào?

Hãy xem đoạn mã JavaScript sau:

const variable = "Variable";

function print() {
  console.log(variable);
};

print(); // "Variable"

Ở đây chúng tôi có variable tuyên bố, các print tuyên bố, và print() chấp hành. Chúng tôi cũng có một nhận xét.

Trong JavaScript, chúng ta biết rằng dấu chấm phẩy được sử dụng để kết thúc câu lệnh. Điều này giúp trình thông dịch phân biệt giữa các câu lệnh.

Trong mã của chúng tôi ở trên, bạn có thể thấy dấu chấm phẩy ở cuối một số dòng để hiển thị vị trí kết thúc của câu lệnh.

Phiên bản “rút gọn” của mã JavaScript ở trên sẽ trông như thế này:

const variable="Variable";function print(){console.log(variable);};print();

Cả hai phiên bản sẽ tạo ra kết quả giống nhau. Sự khác biệt là phiên bản đầu tiên có thể đọc được dễ dàng, trong khi phiên bản thứ hai thì không. Vì vậy, phiên bản đầu tiên là tốt cho phát triển trong khi phiên bản thứ hai phù hợp với sản lượng (bạn sẽ hiểu điều này khi bạn tiếp tục đọc).

Kích thước của phiên bản đầu tiên trên máy tính của tôi là 100 bytetrong khi thứ hai là 75 byte. Tất nhiên, điều này không đáng kể ở đây – nhưng trong các cơ sở mã lớn như hình bên dưới, sự khác biệt sẽ rất rõ ràng:

Đọc thêm  React js không thể đọc thuộc tính của 'kiểu' null trong javascript - JavaScript

hình ảnh-242
Ảnh chụp màn hình nhận được từ StackOverflow

Trình thông dịch để thực thi mã JavaScript không cần khoảng trắng (dấu cách, ngắt dòng, v.v.). Nó cũng không cần bình luận để thực hiện.

Giãn cách và nhận xét mã của chúng tôi là những việc chúng tôi làm với tư cách là nhà phát triển để cải thiện trải nghiệm phát triển của mình. Những điều này làm cho mã dễ đọc hơn và giúp chúng tôi nhớ lý do tại sao chúng tôi đưa ra quyết định nhất định. Nhưng chúng dành cho chúng tôi với tư cách là nhà phát triển, không phải trình duyệt của bạn. Trình duyệt của bạn KHÔNG CẦN những thứ này.

Điều xảy ra sau đó là nếu bạn có nhiều nhận xét/khoảng trắng trong mã của mình, nó có thể làm cho kích thước tệp lớn một cách không cần thiết.

Với việc thu nhỏ, các khoảng trắng không cần thiết và các nhận xét sẽ bị xóa. Mã rút gọn tạo ra kết quả thực thi giống như mã gốc, chỉ có điều mã rút gọn được nén và sẽ có kích thước tệp nhỏ hơn.

Tại sao kích thước tệp lại quan trọng?

Khi bạn truy cập một URL trên trình duyệt của mình, trình duyệt sẽ tìm nạp các tài nguyên được lưu trữ trên máy chủ cho URL đó. Nó lấy .html tệp này, lần lượt tìm nạp các tệp tập lệnh và biểu định kiểu được liên kết.

Với mọi thứ được tìm nạp chính xác, bạn sẽ thấy một trang trên trình duyệt của mình có các phần tử được tạo kiểu và các tương tác (được thực hiện bằng JavaScript) đang hoạt động.

Hai điều có thể làm chậm quá trình nhận các tài nguyên được yêu cầu là:

  • kết nối internet yếu
  • quy mô lớn của tài nguyên
Đọc thêm  JavaScript:Void(0) có nghĩa là gì?

Bạn không thể kiểm soát kết nối internet mà người dùng ứng dụng web của bạn có thể có, nhưng bạn có thể kiểm soát kích thước tệp của mình.

Kích thước tệp nhỏ hơn cải thiện thời gian tải

Kích thước tệp càng lớn thì quá trình tải xuống (tìm nạp) càng mất nhiều thời gian để hoàn tất. Và kích thước tệp càng nhỏ thì quá trình tải xuống hoàn tất càng nhanh.

Bằng cách thu nhỏ các tệp JavaScript của mình, bạn có thể cải thiện thời gian tải tài nguyên vì trình duyệt sẽ cần ít thời gian hơn để tải xuống hoàn toàn các tệp đó.

Kích thước tệp nhỏ hơn cải thiện thời gian phân tích cú pháp ban đầu

Khi trình duyệt tìm nạp tệp JavaScript, trước tiên, công cụ JavaScript sẽ cố phân tích cú pháp tệp. Phân tích cú pháp liên quan đến việc đi qua từng dòng mã, bỏ qua rõ ràng các khoảng trắng và nhận xét, đồng thời kiểm tra xem mã có đúng về mặt cú pháp hay không.

Nếu không, bạn sẽ gặp lỗi. Nếu đúng như vậy, thì mã được dịch sang mã máy mà trình duyệt có thể hiểu được.

Kích thước tệp càng lớn thì càng mất nhiều thời gian để phân tích cú pháp tệp. Kích thước càng nhỏ, trình phân tích cú pháp sẽ càng mất ít thời gian.

Vì vậy, thu nhỏ các tệp JavaScript của bạn cải thiện thời gian phân tích ban đầu.

Những điều này có thể cải thiện hiệu suất chung và thời gian phản hồi của các ứng dụng web của bạn.

Vậy làm thế nào để bạn sử dụng khoảng trắng, nhận xét và những thứ khác mà bạn cần để có trải nghiệm phát triển tốt nhưng vẫn cung cấp các tệp được thu nhỏ để sản xuất? Ý tưởng là để có một phát triểnsản lượng phiên bản mã của bạn.

Đọc thêm  Bản đồ JavaScript – Cách sử dụng Hàm JS .map() (Phương thức mảng)

Cái trước dành cho khi bạn viết mã và xây dựng ứng dụng, còn cái sau là những gì bạn lưu trữ trên máy chủ được gửi tới trình duyệt.

Bạn không phải tự mình thực hiện quá trình rút gọn này. Điều đó gần như là không thể. Tôi sẽ chia sẻ hai công cụ rút gọn mà bạn có thể sử dụng.

thu nhỏ

Công cụ này loại bỏ khoảng trắng, loại bỏ nhận xét, kết hợp các tệp và tối ưu hóa một số mẫu lập trình phổ biến. Bạn cài đặt công cụ trên thiết bị của mình và định cấu hình nó trong mã của bạn bằng đường dẫn JavaScript mà bạn muốn thu nhỏ để sản xuất.

Bạn có thể tham khảo kho lưu trữ để tìm hiểu thêm về công cụ và xem nó được sử dụng như thế nào.

jsmin

Thư viện NPM này hoạt động tương tự với Minify, để xóa nhận xét và khoảng trắng trong tệp JavaScript.

Là một mô-đun Node.js, bạn có thể cài đặt nó trên toàn cầu và sử dụng lệnh CLI, thu nhỏ dự án JavaScript của bạn.

Kiểm tra thư viện trên NPM để tìm hiểu thêm về nó, cách cài đặt và cách sử dụng nó.

kết thúc

Giảm thiểu là một quá trình cải thiện hiệu suất của các ứng dụng của bạn bằng cách giảm thời gian tải và băng thông để tìm nạp tệp từ máy chủ. Bạn có thể thực hiện quy trình này cho nhiều tệp mã khác nhau như HTML, CSS và JavaScript.

Trong bài viết này, tôi đã giải thích rút gọn là gì, tại sao nó lại hữu ích và cách nó có thể được áp dụng cho các tệp JavaScript. Bạn cũng có thể tìm hiểu về CSS Minification tại đây.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status