CẬP NHẬT
Bạn có thể sử dụng preload-webpack-plugin với html-webpack-plugin, nó sẽ cho phép bạn xác định những gì cần tải trước trong cấu hình và nó sẽ tự động chèn thẻ để tải trước đoạn của bạn
lưu ý nếu bây giờ bạn đang sử dụng webpack v4, bạn sẽ phải cài đặt plugin này bằng cách sử dụng preload-webpack-plugin@next
thí dụ
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'asyncChunks'
})
]
Đối với dự án tạo hai tập lệnh không đồng bộ với các tên được tạo động, chẳng hạn như chunk.31132ae6680e598f8879.jsvà
chunk.d15e7fdfc91b34bb78c4.js, các tải trước sau sẽ được đưa vào tài liệuhead
<link rel="preload" as="script" href="chunk.31132ae6680e598f8879.js">
<link rel="preload" as="script" href="chunk.d15e7fdfc91b34bb78c4.js">
CẬP NHẬT 2
nếu bạn không muốn tải trước tất cả các đoạn không đồng bộ nhưng chỉ cụ thể một khi bạn cũng có thể làm điều đó
hoặc bạn có thể sử dụng plugin babel của người di cư hoặc với preload-webpack-pluginnhư sau
đầu tiên bạn sẽ phải đặt tên cho đoạn async đó với sự trợ giúp của webpack
magic commentví dụ
import(/* webpackChunkName: 'myAsyncPreloadChunk' */ './path/to/file')
và sau đó trong cấu hình plugin sử dụng tên đó như
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: ['myAsyncPreloadChunk']
})
]
Trước hết, hãy xem hành vi của trình duyệt khi chúng tôi chỉ định scriptthẻ hoặc linkthẻ để tải tập lệnh
- Bất cứ khi nào một trình duyệt gặp phải một
scriptthẻ, nó sẽ tải nó và phân tích nó ngay lập tức
- bạn chỉ có thể trì hoãn việc phân tích cú pháp và đánh giá với sự trợ giúp của
asyncvà
chỉdefer gắn thẻ cho đến khiDOMContentLoaded sự kiện
- bạn có thể trì hoãn việc thực thi (đánh giá) nếu bạn không chèn thẻ script (chỉ tải trước nó với
link)
bây giờ có một số cách hackey không được đề xuất khác là bạn gửi toàn bộ tập lệnh của mình và stringhoặc comment(vì thời gian đánh giá nhận xét hoặc chuỗi gần như không đáng kể) và khi bạn cần thực thi mà bạn có thể sử dụng Function() constructorhoặc evalcả hai không được khuyến nghị
Một nhân viên dịch vụ tiếp cận khác : (điều này sẽ bảo vệ bạn sự kiện bộ đệm sau khi tải lại trang hoặc người dùng ngoại tuyến sau khi bộ đệm được tải)
Trong trình duyệt hiện đại, bạn có thể sử dụng service workerđể tìm nạp và lưu trữ bộ đệm (JavaScript, hình ảnh, css bất cứ thứ gì) và khi yêu cầu chủ đề chính cho yêu cầu đó, bạn có thể chặn yêu cầu đó và trả lại truy vấn từ bộ đệm theo cách này mà bạn không phân tích cú pháp và đánh giá tập lệnh khi bạn đang tải nó vào bộ đệm đọc thêm về nhân viên dịch vụ tại đây
thí dụ
self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('v1').then(function(cache) {
return cache.addAll([
'/sw-test/',
'/sw-test/index.html',
'/sw-test/style.css',
'/sw-test/app.js',
'/sw-test/image-list.js',
'/sw-test/star-wars-logo.jpg',
'/sw-test/gallery/bountyHunters.jpg',
'/sw-test/gallery/myLittleVader.jpg',
'/sw-test/gallery/snowTroopers.jpg'
]);
})
);
});
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request).then(function(response) {
// caches.match() always resolves
// but in case of success response will have value
if (response !== undefined) {
return response;
} else {
return fetch(event.request).then(function (response) {
// response may be used only once
// we need to save clone to put one copy in cache
// and serve second one
let responseClone = response.clone();
caches.open('v1').then(function (cache) {
cache.put(event.request, responseClone);
});
return response;
}).catch(function () {
// any fallback code here
});
}
}));
});
như bạn có thể thấy đây không phải là một thứ phụ thuộc vào gói web, đây là thứ nằm ngoài phạm vi của gói web, tuy nhiên với sự trợ giúp của gói web, bạn có thể chia gói của mình, điều này sẽ giúp sử dụng nhân viên dịch vụ tốt hơn
if (false) import(…)- Tôi nghi ngờ webpack không phân tích mã chết?