Vấn đề bên trong html
Tách mã là một trong những tính năng hấp dẫn nhất của webpack. Tính năng này cho phép bạn chia mã của mình thành nhiều gói khác nhau, sau đó có thể được tải theo yêu cầu hoặc song song. Nó có thể được sử dụng để đạt được các gói nhỏ hơn và kiểm soát mức độ ưu tiên tải tài nguyên, nếu được sử dụng đúng cách, có thể có tác động lớn đến thời gian tải Show Có ba cách tiếp cận chung để tách mã có sẵn
các điểm nhập cảnhĐây là cách dễ nhất và trực quan nhất để tách mã. Tuy nhiên, nó thủ công hơn và có một số cạm bẫy, chúng ta sẽ xem qua. Hãy xem cách chúng ta có thể tách một mô-đun khác khỏi gói chính dự định
mô-đun khác. js
gói web. cấu hình. js
Điều này sẽ mang lại kết quả xây dựng sau
Như đã đề cập, có một số cạm bẫy đối với phương pháp này
Điểm đầu tiên trong hai điểm này chắc chắn là một vấn đề đối với ví dụ của chúng tôi, vì 7 cũng được nhập trong 8 và do đó sẽ được sao chép trong cả hai gói. Hãy loại bỏ sự trùng lặp này trong phần tiếp theophụ thuộc đầu vàoCho phép chia sẻ các mô-đun giữa các khối gói web. cấu hình. js ngày thứ 8Nếu chúng tôi định sử dụng nhiều điểm vào trên một trang HTML, thì cũng cần có ____ ______, nếu không chúng tôi có thể gặp rắc rối được mô tả tại đây gói web. cấu hình. js 0Và đây là kết quả của việc xây dựng 1Như bạn có thể thấy, có một tệp 1 khác được tạo bên cạnh 2, 3 và 4Mặc dù cho phép sử dụng nhiều điểm nhập trên mỗi trang trong webpack, nhưng nên tránh sử dụng khi có thể để ưu tiên một điểm nhập có nhiều lần nhập. 5. Điều này dẫn đến việc tối ưu hóa tốt hơn và thứ tự thực thi nhất quán khi sử dụng thẻ tập lệnh 6SplitChunksPlugin 6 cho phép chúng tôi trích xuất các phụ thuộc phổ biến vào một đoạn mục nhập hiện có hoặc một đoạn hoàn toàn mới. Hãy sử dụng điều này để khử trùng lặp phụ thuộc 7 từ ví dụ trướcgói web. cấu hình. js 0Với tùy chọn cấu hình tại chỗ, bây giờ chúng ta sẽ thấy phần phụ thuộc trùng lặp đã bị xóa khỏi 3 và 4 của chúng ta. Plugin sẽ lưu ý rằng chúng tôi đã tách 7 thành một đoạn riêng biệt và loại bỏ trọng lượng chết khỏi gói chính của chúng tôi. Hãy làm một 3 để xem nó có hoạt động không 5Dưới đây là một số plugin và trình tải hữu ích khác do cộng đồng cung cấp để tách mã Nhập độngHai kỹ thuật tương tự được webpack hỗ trợ khi phân tách mã động. Cách tiếp cận đầu tiên và được đề xuất là sử dụng phương pháp phù hợp với đề xuất ECMAScript để nhập động. Cách tiếp cận kế thừa dành riêng cho webpack là sử dụng. Hãy thử sử dụng cách đầu tiên trong hai cách tiếp cận này Trước khi chúng tôi bắt đầu, hãy loại bỏ thêm 5 và 9 khỏi cấu hình của chúng tôi trong ví dụ trên vì chúng sẽ không cần thiết cho phần trình diễn tiếp theo nàygói web. cấu hình. js 8Chúng tôi cũng sẽ cập nhật dự án của mình để xóa các tệp hiện không sử dụng dự định 0Bây giờ, thay vì nhập tĩnh 7, chúng tôi sẽ sử dụng nhập động để tách một đoạnsrc/chỉ mục. js 1Lý do chúng tôi cần 9 là vì webpack 4, khi nhập mô-đun CommonJS, quá trình nhập sẽ không còn phân giải thành giá trị của 0, thay vào đó, nó sẽ tạo một đối tượng không gian tên nhân tạo cho mô-đun CommonJS. Để biết thêm thông tin về lý do đằng sau điều này, hãy đọc webpack 4. nhập() và CommonJsHãy chạy webpack để xem 7 được tách ra thành một gói riêng 2Khi 4 trả về một lời hứa, nó có thể được sử dụng với các hàm của 6. Đây là cách nó sẽ đơn giản hóa mãsrc/chỉ mục. js 3Tìm nạp trước/Tải trước mô-đunGói web 4. 6. 0+ thêm hỗ trợ cho tìm nạp trước và tải trước Sử dụng các lệnh nội tuyến này trong khi khai báo quá trình nhập của bạn cho phép gói web xuất ra “Gợi ý tài nguyên” cho trình duyệt biết rằng đối với
Một ví dụ về điều này là có thành phần 4, thành phần này hiển thị thành phần 5, sau đó theo yêu cầu sẽ tải thành phần 6 sau khi được nhấpnút đăng nhập. js Điều này sẽ dẫn đến việc 7 được thêm vào phần đầu của trang, điều này sẽ hướng dẫn trình duyệt tìm nạp trước tệp 8 trong thời gian nhàn rỗiChỉ thị tải trước có nhiều điểm khác biệt so với tìm nạp trước
Một ví dụ về điều này có thể là có một 9 luôn phụ thuộc vào một thư viện lớn nên nằm trong một đoạn riêng biệtHãy tưởng tượng một thành phần 00 cần một 01 khổng lồ. Nó hiển thị một 02 khi được kết xuất và ngay lập tức thực hiện nhập khẩu theo yêu cầu của 01Thành phần biểu đồ. js Khi một trang sử dụng 00 được yêu cầu, chart-library-chunk cũng được yêu cầu thông qua 7. Giả sử đoạn trang nhỏ hơn và kết thúc nhanh hơn, trang sẽ được hiển thị với 02, cho đến khi kết thúc 07 đã được yêu cầu. Điều này sẽ giúp tăng thời gian tải một chút vì nó chỉ cần một chuyến khứ hồi thay vì hai. Đặc biệt là trong môi trường có độ trễ caoĐôi khi bạn cần có quyền kiểm soát tải trước của riêng mình. Ví dụ: tải trước bất kỳ quá trình nhập động nào có thể được thực hiện thông qua tập lệnh async. Điều này có thể hữu ích trong trường hợp kết xuất phía máy chủ phát trực tuyến Nếu quá trình tải tập lệnh không thành công trước khi webpack bắt đầu tự tải tập lệnh đó (webpack chỉ tạo thẻ tập lệnh để tải mã của nó, nếu tập lệnh đó không có trên trang), trình xử lý bắt đó sẽ không bắt đầu cho đến khi không được thông qua. Hành vi này có thể bất ngờ. Nhưng điều đó có thể giải thích được - webpack không thể đưa ra bất kỳ lỗi nào, vì webpack không biết, tập lệnh đó không thành công. Webpack sẽ thêm trình xử lý lỗi vào tập lệnh ngay sau khi xảy ra lỗi Để ngăn chặn sự cố như vậy, bạn có thể thêm trình xử lý onerror của riêng mình, trình xử lý này sẽ xóa tập lệnh trong trường hợp có bất kỳ lỗi nào 4Trong trường hợp đó, tập lệnh bị lỗi sẽ bị xóa. Webpack sẽ tạo tập lệnh riêng và mọi lỗi sẽ được xử lý mà không có bất kỳ thời gian chờ nào Phân tích góiKhi bạn bắt đầu tách mã của mình, có thể hữu ích khi phân tích đầu ra để kiểm tra xem các mô-đun đã kết thúc ở đâu. Công cụ phân tích chính thức là một nơi tốt để bắt đầu. Ngoài ra còn có một số tùy chọn khác được cộng đồng hỗ trợ
bước tiếp theoXem Lazy Loading để biết ví dụ cụ thể hơn về cách sử dụng 4 trong ứng dụng thực và bộ nhớ đệm để tìm hiểu cách phân tách mã hiệu quả hơn |