Tất cả những gì bạn cần biết về việc chia mã JavaScript

Các trang web hiện đại thường kết hợp tất cả JavaScript của họ thành một lần duy nhất, lớn main.js. kịch bản. Điều này thường xuyên chứa các tập lệnh cho tất cả các trang hoặc tuyến đường của bạn, ngay cả khi người dùng chỉ cần một phần nhỏ cho trang họ đang xem.

Khi JavaScript được phục vụ theo cách này, hiệu suất tải của các trang web của bạn có thể bị ảnh hưởng - đặc biệt là với thiết kế web đáp ứng trên thiết bị di động. Vì vậy, hãy sửa nó bằng cách thực hiện phân tách mã JavaScript.

• Cách mã nhanh hơn, bật lửa JavaScript

Mã tách mã giải quyết vấn đề gì?

Khi một trình duyệt web nhìn thấy một & lt; script & gt; Nó cần phải dành thời gian tải xuống và xử lý JavaScript bạn đang tham khảo. Điều này có thể cảm thấy nhanh chóng trên các thiết bị cao cấp nhưng đang tải, phân tích cú pháp và thực thi mã JavaScript không sử dụng có thể mất một lúc trên các thiết bị di động trung bình với mạng chậm hơn và CPU chậm hơn. Nếu bạn đã từng đăng nhập vào Cà phê-Shop hoặc Hotel Wifi, bạn biết những trải nghiệm mạng chậm có thể xảy ra với mọi người.

Mỗi giây đã dành để chờ đợi trên JavaScript để hoàn tất khởi động có thể trì hoãn việc người dùng có thể tương tác với kinh nghiệm của bạn sớm như thế nào. Điều này đặc biệt là trường hợp nếu UX của bạn dựa vào JS cho các thành phần quan trọng hoặc thậm chí chỉ cần đính kèm các trình xử lý sự kiện cho các mẩu UI đơn giản.

Tôi có cần bận tâm với việc tách mã không?

Nó chắc chắn đáng để tự hỏi liệu bạn có cần chia mã hóa (nếu bạn đã sử dụng đơn giản người tạo ra trang web Bạn có thể không). Nếu trang web của bạn yêu cầu JavaScript cho nội dung tương tác (đối với các tính năng như ngăn kéo menu và băng chuyền) hoặc là một ứng dụng duy nhất dựa trên các khung JavaScript để kết xuất UI, câu trả lời có khả năng 'có'. Việc chia mã có đáng giá đối với trang web của bạn là một câu hỏi bạn sẽ cần phải trả lời chính mình không. Bạn hiểu kiến ​​trúc của bạn và cách trang web của bạn tải tốt nhất. Rất may có những công cụ có sẵn để giúp bạn ở đây. Hãy nhớ rằng nếu bạn đang triển khai các thay đổi trên hệ thống thiết kế của mình, hãy lưu những thay đổi đó trong chia sẻ của bạn lưu trữ đám mây Vì vậy, nhóm của bạn có thể nhìn thấy.

Được trợ giúp

Đối với những người mới đối với việc tách mã JavaScript, Ngọn hải đăng. - Bảng kiểm toán trong các công cụ dành cho nhà phát triển Chrome - có thể giúp chiếu sáng cho dù đây là một vấn đề cho trang web của bạn. Kiểm toán bạn sẽ muốn tìm kiếm là giảm thời gian thực hiện JavaScript (tài liệu đây ). Kiểm toán này nhấn mạnh tất cả các tập lệnh trên trang của bạn có thể trì hoãn việc người dùng tương tác với nó.

PageSpeed ​​Insights. là một công cụ trực tuyến cũng có thể làm nổi bật hiệu suất của trang web của bạn - và bao gồm dữ liệu phòng thí nghiệm từ dữ liệu hải đăng và dữ liệu trong thế giới thực trên hiệu suất trang web của bạn từ báo cáo trải nghiệm người dùng Chrome. Của bạn web hosting Dịch vụ có thể có các tùy chọn khác.

Bảo hiểm mã trong Công cụ Nhà phát triển Chrome

Nếu có vẻ như bạn có các tập lệnh tốn kém có thể được phân chia tốt hơn, công cụ tiếp theo sẽ xem xét là tính năng bảo hiểm mã trong các công cụ dành cho nhà phát triển Chrome (DevTools & GT; Menu trên cùng bên phải & GT; Thêm công cụ & GT; Bảo hiểm). Điều này đo lường mức độ JavaScript (và CSS) không sử dụng trong trang của bạn. Đối với mỗi tập lệnh tóm tắt, devtools sẽ hiển thị 'byte không sử dụng'. Đây là mã bạn có thể xem xét chia tách và lười biếng khi người dùng cần.

Các loại phân tách mã khác nhau

Có một vài cách tiếp cận khác nhau mà bạn có thể thực hiện khi nói đến việc chia mã JavaScript. Những thứ này áp dụng cho trang web của bạn có xu hướng thay đổi tùy thuộc vào việc bạn muốn phân chia trang / ứng dụng 'logic' hoặc phân tách các thư viện / khung từ các 'nhà cung cấp' khác hay không.

Tách mã động: Nhiều người trong chúng ta 'nhập vào các mô-đun và phụ thuộc JavaScript nhập cảnh tĩnh để chúng được kết hợp với nhau thành một tệp tại thời điểm xây dựng. Tách mã 'Dynamic' bổ sung khả năng xác định các điểm trong JavaScript của bạn mà bạn muốn phân tách và lười biếng khi cần thiết. JavaScript hiện đại sử dụng động Nhập () tuyên bố để đạt được điều này. Chúng tôi sẽ bao gồm điều này trong thời gian ngắn hơn.

Tách mã nhà cung cấp: Các khung và thư viện bạn dựa vào (ví dụ: phản ứng, góc cạnh, vue hoặc lodrash) khó có thể thay đổi trong các tập lệnh bạn gửi xuống cho người dùng của mình, thường là 'logic' cho trang web của bạn. Để giảm tác động tiêu cực của sự vô hiệu hóa bộ nhớ cache để người dùng quay lại trang web của bạn, bạn có thể chia 'các nhà cung cấp' của mình thành một tập lệnh riêng biệt.

Tách mã điểm vào: Các mục đang bắt đầu các điểm trong trang web hoặc ứng dụng của bạn mà một công cụ như WebPack có thể nhìn vào việc xây dựng cây phụ thuộc của bạn. Tách theo các mục hữu ích cho các trang nơi không sử dụng định tuyến phía máy khách hoặc bạn đang dựa vào sự kết hợp của máy chủ và kết xuất phía máy khách.

Đối với mục đích của chúng tôi trong bài viết này, chúng tôi sẽ tập trung vào việc chia mã động.

Bắt tay với việc tách mã

Hãy tối ưu hóa hiệu suất JavaScript của một Ứng dụng đơn giản sắp xếp ba số Thông qua việc chia mã - đây là một ứng dụng của đồng nghiệp housein djirdeh của tôi. Quy trình làm việc chúng ta sẽ sử dụng để làm cho tải JavaScript của chúng tôi một cách nhanh chóng là đo lường, tối ưu hóa và giám sát. Bắt đầu ở đây .

Đo hiệu suất

Trước khi cố gắng thêm bất kỳ tối ưu hóa, chúng ta sẽ lần đầu tiên đo lường hiệu suất của JavaScript của chúng tôi. Vì ứng dụng Magic Sorter được lưu trữ trên trục trặc, chúng tôi sẽ sử dụng môi trường mã hóa của nó. Đây là cách để đi về nó:

• Nhấp vào nút Hiển thị trực tiếp.
• Mở devtools bằng cách nhấn tùy chọn CMD + + I / Ctrl + Shift + i.
• Chọn bảng mạch.
• Đảm bảo Vô hiệu hóa bộ đệm được kiểm tra và tải lại ứng dụng.

Ứng dụng đơn giản này dường như đang sử dụng 71,2 KB JavaScript chỉ để sắp xếp qua một vài số. Điều đó chắc chắn không đúng. Trong nguồn của chúng tôi src / index.js. , Thư viện tiện ích Lodash được nhập khẩu và chúng tôi sử dụng sắp xếp - Một trong những tiện ích sắp xếp của nó - để sắp xếp các số của chúng tôi. Lodash cung cấp một số chức năng hữu ích nhưng ứng dụng chỉ sử dụng một phương thức từ nó. Đó là một lỗi phổ biến để cài đặt và nhập tất cả sự phụ thuộc của bên thứ ba khi thực tế thực tế, bạn chỉ cần sử dụng một phần nhỏ của nó.

Tối ưu hóa gói của bạn

Có một vài tùy chọn có sẵn để cắt giảm kích thước gói JavaScript của chúng tôi:

1. Viết một phương thức sắp xếp tùy chỉnh thay vì dựa vào thư viện thứ ba.
2. Sử dụng Mảng.prototype.sort () , được tích hợp vào trình duyệt.
3. Chỉ nhập vào sắp xếp Phương pháp từ Lodash thay vì toàn bộ thư viện.
4. Chỉ tải xuống mã để sắp xếp khi người dùng cần nó (khi họ nhấp vào nút).

Tùy chọn 1 và 2 là phù hợp để giảm kích thước gói của chúng tôi - những thứ này có thể có ý nghĩa cho một ứng dụng thực sự. Đối với mục đích giảng dạy, chúng ta sẽ thử một cái gì đó khác biệt. Tùy chọn 3 và 4 giúp cải thiện hiệu suất của ứng dụng.

Chỉ nhập mã bạn cần

Chúng tôi sẽ sửa đổi một vài tệp để chỉ nhập đơn sắp xếp Phương pháp chúng ta cần từ Lodash. Hãy bắt đầu với việc thay thế chúng ta Lodash. phụ thuộc vào Gói.json. :

"lodash": "^4.7.0",

Với cái này:

"lodash.sortby": "^4.7.0",

Trong SRC / index.js, chúng tôi sẽ nhập mô-đun cụ thể hơn này:

 Js
nhập "./style.css";
nhập khẩu _ từ "Lodash";
Nhập khẩu từ "Lodash.Sortby"; 

Tiếp theo, chúng tôi sẽ cập nhật cách các giá trị được sắp xếp:

 Js
form.addeventlistener ("Gửi", e = & gt; {
  e.preventdefault ();
  giá trị const = [input1.valueasnumber, input2.valueasnumber, input3.valueasnumber];
  Const SortedValues ​​= _.sortby (giá trị);
  const sortedvalues ​​= sortby (giá trị);
  kết quả.innerhtml = `.
    & lt; H2 & GT;
      $ {SortedValues}
    & lt; / h2 & gt;
  `.
}); 

Tải lại ứng dụng số ma thuật, mở công cụ phát triển và xem lại bảng mạng. Đối với ứng dụng cụ thể này, kích thước bó của chúng tôi đã giảm theo thang điểm bốn với ít công việc. Nhưng vẫn còn nhiều chỗ để cải thiện.

Mã JavaScript Tách

WebPack là một trong những bundlers mô-đun JavaScript phổ biến nhất được sử dụng bởi các nhà phát triển web ngày nay. Nó 'Gói' (kết hợp) Tất cả các mô-đun JavaScript của bạn và các tài sản khác vào các tệp web tĩnh có thể đọc.

Gói đơn trong ứng dụng này có thể được chia thành hai tập lệnh riêng biệt:

• Một người chịu trách nhiệm cho mã tạo nên tuyến đường ban đầu.
• Một số khác chứa mã sắp xếp của chúng tôi.

Sử dụng nhập khẩu động (với Nhập () Từ khóa), một kịch bản thứ hai có thể được tải lười biếng theo yêu cầu. Trong ứng dụng số ma thuật của chúng tôi, mã tạo thành tập lệnh có thể được tải khi cần khi người dùng nhấp vào nút. Chúng tôi bắt đầu bằng cách loại bỏ nhập cấp cao nhất cho phương thức sắp xếp trong src / index.js. :

 Nhập khẩu từ "Lodash.Sortby"; 

Nhập nó trong trình lắng nghe sự kiện mà bắn khi nhấp vào nút:

form.addeventlistener ("Gửi", e = & gt; {
  e.preventdefault ();
  Nhập khẩu ('Lodash.Sortby')
    .Then (mô-đun = & gt; mô-đun.default)
    .then (sortinput ())
    .catch (err = & gt; {alert (err)});
});

NĂNG LƯỢNG NÀY. Nhập () Tính năng Chúng tôi đang sử dụng là một phần của đề xuất tiêu chuẩn cho việc bao gồm khả năng nhập động một mô-đun trong tiêu chuẩn ngôn ngữ JavaScript. WebPack đã hỗ trợ cú pháp này. Bạn có thể đọc thêm về cách nhập khẩu động hoạt động Trong Điều này .

Các Nhập () tuyên bố trả về một lời hứa khi nó giải quyết. WebPack coi đây là điểm phân tách mà nó sẽ bị hỏng thành một tập lệnh riêng (hoặc chunk). Khi mô-đun được trả về, mô-đun.default. được sử dụng để tham chiếu đến xuất mặc định được cung cấp bởi Lodash. . Lời hứa bị xiềng xích với người khác .sau đó() Gọi A. Sắp xếp phương thức để sắp xếp ba giá trị đầu vào. Vào cuối chuỗi hứa, .nắm lấy() được kêu gọi để xử lý nơi mà lời hứa bị từ chối là kết quả của một lỗi.

Trong một ứng dụng sản xuất thực sự, bạn nên xử lý các lỗi nhập năng động một cách thích hợp. Các thông báo cảnh báo đơn giản (tương tự như những gì được sử dụng ở đây) là những gì được sử dụng và có thể không cung cấp trải nghiệm người dùng tốt nhất để cho phép người dùng biết điều gì đó đã xảy ra.

Trong trường hợp bạn thấy lỗi linting như "Lỗi phân tích cú pháp: Nhập và xuất chỉ có thể xuất hiện ở cấp cao nhất", hãy biết rằng đây là do cú pháp nhập động không được hoàn tất. Mặc dù WebPack hỗ trợ nó, các cài đặt cho eslint (một công cụ xơ JavaScript) được sử dụng bởi trục trặc chưa được cập nhật để bao gồm cú pháp này nhưng nó vẫn hoạt động.

Điều cuối cùng chúng ta cần làm là viết Sắp xếp phương thức ở cuối tập tin của chúng tôi. Đây phải là một hàm trả về một hàm đưa vào phương thức đã nhập từ Lodash.Sortby. . Hàm lồng nhau có thể sắp xếp ba giá trị đầu vào và cập nhật DOM:

 Const SortInput = () = & GT; Đồn là
  return (sortby) = & gt; Đồn là
    giá trị const = [
      đầu vào1.valueasnumber,
      input2.valueasnumber,
      đầu vào3.valueasnumber.
    ];
    const sortedvalues ​​= sortby (giá trị);
    kết quả.innerhtml = `.
      & lt; H2 & GT;
        $ {SortedValues}
      & lt; / h2 & gt;
    `.
  };
} 

Theo dõi các số.

Bây giờ hãy tải lại ứng dụng lần cuối và giữ một mắt nhắm vào bảng điều khiển mạng. Bạn sẽ chú ý làm thế nào, chỉ có một gói ban đầu nhỏ được tải xuống khi ứng dụng tải. Sau khi nhấp vào nút được nhấp để sắp xếp các số đầu vào, tập lệnh / chunk chứa mã sắp xếp được tìm nạp và thực thi. Bạn có thấy những con số vẫn được sắp xếp như thế nào khi chúng ta mong đợi họ?

Việc tách mã JavaScript và tải lười biếng có thể rất hữu ích để cắt giảm kích thước gói ban đầu của ứng dụng hoặc trang web của bạn. Điều này có thể trực tiếp kết quả trong thời gian tải trang nhanh hơn cho người dùng. Mặc dù chúng tôi đã xem thêm việc chia mã thành ứng dụng JavaScript vanilla, bạn cũng có thể áp dụng nó cho các ứng dụng được xây dựng với các thư viện hoặc khung.

Lười biếng tải với thư viện JavaScript hoặc khung

Rất nhiều khung phổ biến hỗ trợ thêm phân tách mã và lười biếng khi sử dụng nhập khẩu động và webpack.

Đây là cách bạn có thể lười tải thành phần 'Mô tả' phim 'bằng phản ứng (với Phản ứng () và tính năng hồi hộp của họ) để cung cấp một dự phòng "Đang tải ..." trong khi thành phần đang được tải lười biếng (xem đây Để biết thêm chi tiết):

 Nhập lại phản ứng, {hồi hộp} từ 'phản ứng';
Const mô tả = phản ứng. lười biếng (() = & gt; nhập ('./ mô tả')));
Ứng dụng chức năng () {
  trở về (
    & lt; div & gt;
      & lt; h1 & gt; bộ phim của tôi & lt; / h1 & gt;
      & lt; dự phòng hồi hộp = "Đang tải ..." & gt;
        & lt; mô tả / & gt;
      & lt; / hồi hộp & gt;
    & lt; / div & gt;
  );
} 

Tách mã có thể giúp giảm tác động của JavaScript trên trải nghiệm người dùng của bạn. Chắc chắn xem xét nếu bạn có các gói JavaScript lớn hơn và khi nghi ngờ, đừng quên đo lường, tối ưu hóa và giám sát.

Bài viết này ban đầu được xuất bản trong số 317 của mạng lưới , Tạp chí bán chạy nhất thế giới cho các nhà thiết kế và nhà phát triển web. Mua số 317 ở đây hoặc là Đăng ký tại đây .

Những bài viết liên quan:

• 9 của các khung JavaScript tốt nhất
• 15 công cụ JavaScript cần thiết bạn nên sử dụng
• 14 của API JavaScript tốt nhất