ОБНОВИТЬ
Вы можете использовать preload-webpack-plugin с html-webpack-plugin, он позволит вам определить, что предварительно загружать в конфигурацию, и автоматически вставит теги для предварительной загрузки вашего чанка.
обратите внимание, что если вы используете webpack v4, вам нужно установить этот плагин, используя preload-webpack-plugin@next
пример
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'asyncChunks'
})
]
Для проекта, генерирующего два асинхронных сценария с динамически генерируемыми именами, такими как 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
если вы не хотите предварительно загружать весь асинхронный блок, но только один раз, вы можете сделать это тоже
либо вы можете использовать babel плагин migcoder или preload-webpack-pluginкак
Сначала вы должны назвать этот асинхронный блок с помощью webpack
magic commentпримера
import(/* webpackChunkName: 'myAsyncPreloadChunk' */ './path/to/file')
а затем в конфигурации плагина использовать это имя как
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: ['myAsyncPreloadChunk']
})
]
Прежде всего давайте посмотрим поведение браузера, когда мы указываем scriptтег или linkтег для загрузки скрипта
- всякий раз, когда браузер сталкивается с
scriptтегом, он загружает его, анализирует и немедленно выполняет его
- Вы можете только отложить анализ и оценку только с помощью тега
asyncи
до события.deferDOMContentLoaded
- вы можете отложить выполнение (оценку), если не вставите тег сценария (только предварительно загрузите его
link)
теперь есть и другой, не рекомендуемый хаккейный способ: вы отправляете весь свой сценарий и stringили comment(потому что время оценки комментария или строки практически ничтожно), и когда вам нужно выполнить то, что вы можете использовать, Function() constructorили evalоба не рекомендуется
Работники сервиса другого подхода : (это сохранит ваше кеш-событие после перезагрузки страницы или пользователь перейдет в автономный режим после загрузки кеша)
В современном браузере вы можете использовать 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
});
}
}));
});
как вы можете видеть, это не зависит от веб-пакета , это выходит за рамки веб-пакета, однако с помощью веб-пакета вы можете разделить свой пакет, что поможет лучше использовать работника сервиса
if (false) import(…)Я сомневаюсь, что веб-пакет делает анализ мертвого кода?