ОБНОВЛЕНИЕ
Вы можете использовать preload-webpack-plugin с html -webpack-plugin , это позволит вам определить, что для предварительной загрузки в конфигурации, и он автоматически вставит теги для предварительной загрузки вашего чанка
примечание, если вы используете webpack v4 на данный момент, вам придется установить этот плагин, используя preload-webpack-plugin@next
пример
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'asyncChunks'
})
]
Для проекта, генерирующего два асинхронных c сценария с динамически генерируемыми именами, такими как chunk.31132ae6680e598f8879.js и chunk.d15e7fdfc91b34bb78c4.js, следующие предварительные загрузки будут внедрены в документ head
<link rel="preload" as="script" href="chunk.31132ae6680e598f8879.js">
<link rel="preload" as="script" href="chunk.d15e7fdfc91b34bb78c4.js">
ОБНОВЛЕНИЕ 2
, если вы не хотите предварительно загружать весь асинхронный блок c, а только указывать c раз вы можете сделать это тоже
либо вы можете использовать плагин migcoder's babel или с preload-webpack-plugin, как в случае с
сначала у вас будет назвать этот асин c чанк с помощью webpack
magic comment пример
import(/* webpackChunkName: 'myAsyncPreloadChunk' */ './path/to/file')
и затем в конфигурации плагина При этом используйте это имя, например
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: ['myAsyncPreloadChunk']
})
]
Прежде всего, давайте посмотрим, как работает браузер, когда мы указываем тег script или link для загрузки сценария
- всякий раз, когда браузер сталкивается с тегом
script, он загружает его, анализирует и немедленно выполняет его - Вы можете только отложить анализ и оценку только с помощью
async и defer тег только до DOMContentLoaded событие - вы можете отложить выполнение (оценку), если вы не вставите тег сценария (только предварительно загрузите его с
link)
теперь есть некоторые другие не рекомендуемые хаккейный способ - вы отправляете весь свой сценарий и string или comment (потому что время оценки комментария или строки практически ничтожно) и когда вам нужно выполнить, что вы можете использовать Function() constructor или eval оба не рекомендуются
другой подход Сервисные работники: (это сохранит ваше кеш-событие после перезагрузки страницы или перехода пользователя в автономный режим после загрузки кеша)
* 1 084 * В современном браузере вы можете использовать
service worker для извлечения и кэширования ресурса (JavaScript, изображение, css что угодно), и когда основной поток запроса для этого ресурса вы можете перехватить этот запрос и таким образом вернуть ресурс из кэша вы не анализируете и не анализируете скрипт, когда загружаете его в кеш, читайте больше о сервисных работниках
здесь пример
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
});
}
}));
});
, как вы можете видеть это не зависимый от веб-пакета вещь, которая выходит за рамки веб-пакета, однако с помощью веб-пакета вы можете разделить ваш пакет, что поможет более эффективно использовать работника сервиса