gói web
webpack đi kèm với một trình bổ trợ có tên SplitChunksPlugin, giúp bạn
định cấu hình cách trình gói phân tách tệp JavaScript. webpack nhận dạng được cả
câu lệnh import() linh động và câu lệnh import tĩnh. Hành vi của
Có thể sửa đổi SplitChunksPlugin bằng cách chỉ định tuỳ chọn chunks trong
cấu hình:
chunks: async là giá trị mặc định và tham chiếu đến các lệnh gọi import() động.chunks: initial đề cập đến các lệnh gọi import tĩnh.chunks: all bao gồm cả import() động và nhập tĩnh, cho phép bạn
để chia sẻ các phân đoạn giữa lệnh nhập async và initial.
Theo mặc định, bất cứ khi nào webpack gặp một câu lệnh import() động. nó
sẽ tạo một phân đoạn riêng cho mô-đun đó:
/* main.js */
// An application-specific chunk required during the initial page load:
import myFunction from './my-function.js';
myFunction('Hello world!');
// If a specific condition is met, a separate chunk is downloaded on demand,
// rather than being bundled with the initial chunk:
if (condition) {
// Assumes top-level await is available. More info:
// https://v8.dev/features/top-level-await
await import('/form-validation.js');
}
Cấu hình gói web mặc định cho đoạn mã trước đó dẫn đến hai kết quả
các phần riêng biệt:
- Phân đoạn
main.js (được webpack phân loại là phân đoạn initial)
bao gồm mô-đun main.js và ./my-function.js.
- Phân đoạn
async, chỉ bao gồm form-validation.js (chứa một
tệp băm trong tên tài nguyên nếu đã định cấu hình). Phân đoạn này chỉ được tải xuống
nếu và khi condition là sự thật.
Cấu hình này cho phép bạn trì hoãn việc tải phân đoạn form-validation.js cho đến khi
điều đó thực sự cần thiết. Điều này có thể cải thiện khả năng phản hồi của tải bằng cách giảm tập lệnh
đánh giá trong lần tải trang đầu tiên. Tải xuống và đánh giá tập lệnh
cho phân đoạn form-validation.js xảy ra khi đáp ứng một điều kiện đã chỉ định trong
trong trường hợp đó, mô-đun được nhập động sẽ được tải xuống. Ví dụ:
điều kiện trong đó một polyfill chỉ được tải xuống cho một trình duyệt cụ thể hoặc—như trong
ví dụ trước đó—mô-đun được nhập là cần thiết cho tương tác của người dùng.
Mặt khác, việc thay đổi cấu hình SplitChunksPlugin để chỉ định
chunks: initial đảm bảo rằng mã chỉ được phân tách trên các đoạn ban đầu. Đây là
chẳng hạn như các phân đoạn được nhập tĩnh hoặc được liệt kê trong entry của gói webpack
thuộc tính. Nhìn vào ví dụ trước, đoạn thu được sẽ là
kết hợp form-validation.js và main.js trong một tệp tập lệnh duy nhất,
dẫn đến hiệu suất tải trang ban đầu có thể kém hơn.
Bạn cũng có thể định cấu hình các tuỳ chọn cho SplitChunksPlugin để phân tách các giá trị lớn hơn
thành nhiều tập lệnh nhỏ hơn – ví dụ: bằng cách sử dụng tuỳ chọn maxSize
hướng dẫn webpack chia các phần thành các tệp riêng biệt nếu chúng vượt quá
do maxSize chỉ định. Việc chia các tệp tập lệnh lớn thành các tệp nhỏ hơn có thể
cải thiện khả năng phản hồi của quá trình tải, như trong một số trường hợp, việc đánh giá tập lệnh cần nhiều CPU
công việc được chia thành các công việc nhỏ hơn, nên ít có khả năng chặn
trong khoảng thời gian dài hơn.
Ngoài ra, việc tạo các tệp JavaScript lớn hơn cũng có nghĩa là các tập lệnh
có nhiều khả năng bị vô hiệu hoá bộ nhớ đệm. Ví dụ: nếu bạn gửi rất nhiều
tập lệnh lớn có cả mã khung và mã xử lý ứng dụng của bên thứ nhất, toàn bộ
gói có thể bị vô hiệu hoá nếu chỉ khung được cập nhật, chứ không có gì khác trong
tài nguyên đi kèm.
Mặt khác, các tệp tập lệnh càng nhỏ thì khả năng trả về càng lớn
khách truy cập truy xuất tài nguyên từ bộ nhớ đệm, giúp trang tải nhanh hơn trên
số lượt truy cập lặp lại. Tuy nhiên, các tệp nhỏ hơn sẽ được hưởng ít lợi ích hơn từ khả năng nén so với kích thước lớn
đồng thời có thể tăng thời gian trọn vòng của mạng khi tải trang mà không cần
bộ nhớ đệm của trình duyệt. Bạn phải cẩn thận để cân bằng giữa việc lưu vào bộ nhớ đệm
hiệu quả, hiệu quả nén và thời gian đánh giá tập lệnh.
bản minh hoạ gói web
bản minh hoạ SplitChunksPlugin của gói webpack.
Kiểm tra kiến thức của bạn
Loại câu lệnh import nào được dùng khi thực hiện mã
chia tách?
import() động.
Chính xác!
import tĩnh.
Hãy thử lại.
Loại câu lệnh import nào phải ở trên cùng
của một mô-đun JavaScript, và không ở vị trí nào khác?
import() động.
Hãy thử lại.
Khi sử dụng SplitChunksPlugin trong webpack,
sự khác biệt giữa phân đoạn async và phân đoạn
initial phân đoạn?
async phần được tải bằng import() động
và initial phần được tải bằng cách sử dụng phương thức tĩnh
import.
Chính xác!
async phân đoạn được tải bằng import tĩnh
và initial phần được tải bằng cách sử dụng
import().
Hãy thử lại.
Tiếp theo: Tải từng phần hình ảnh và các phần tử
