ATUALIZAR
Você pode usar o preload-webpack-plugin com o html-webpack-plugin, ele permitirá definir o que pré-carregar na configuração e inserir tags automaticamente para pré-carregar seu bloco
note que se você estiver usando o webpack v4 a partir de agora, precisará instalar este plugin usando preload-webpack-plugin@next
exemplo
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'asyncChunks'
})
]
Para um projeto que gera dois scripts assíncronos com nomes gerados dinamicamente, como chunk.31132ae6680e598f8879.js
e
chunk.d15e7fdfc91b34bb78c4.js
, as pré-cargas a seguir serão injetadas no documentohead
<link rel="preload" as="script" href="chunk.31132ae6680e598f8879.js">
<link rel="preload" as="script" href="chunk.d15e7fdfc91b34bb78c4.js">
ATUALIZAÇÃO 2
se você não quiser pré-carregar todos os trechos assíncronos, mas apenas específico quando puder fazer isso também
você pode usar o plugin babel do migcoder ou com o preload-webpack-plugin
seguinte
primeiro você terá que nomear esse pedaço assíncrono com ajuda do webpack
magic comment
exemplo
import(/* webpackChunkName: 'myAsyncPreloadChunk' */ './path/to/file')
e, em seguida, na configuração do plugin, use esse nome como
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: ['myAsyncPreloadChunk']
})
]
Primeiro de tudo, vamos ver o comportamento do navegador quando especificamos script
tag ou link
tag para carregar o script
- sempre que um navegador encontrar uma
script
tag, ele será carregado, analisado e executado imediatamente
- você só pode atrasar a análise e avaliação com a ajuda de
async
e
defer
marcar somente até oDOMContentLoaded
evento
- você pode atrasar a execução (avaliação) se não inserir a tag de script (apenas pré-carregá-la com
link
)
Agora, existem outras maneiras não recomendadas de hackey: você envia todo o script e string
ou comment
(porque o tempo de avaliação do comentário ou da string é quase insignificante) e quando você precisa executar, pode usar Function() constructor
ou eval
ambos não são recomendados
Outros trabalhadores do serviço de abordagem : (isso preservará seu evento de cache após o recarregamento da página ou o usuário ficará offline após o carregamento do cache)
No navegador moderno, você pode usar service worker
para buscar e armazenar em cache um recurso (JavaScript, imagem, css, qualquer coisa) e, quando o thread principal solicita esse recurso, você pode interceptar esse pedido e retornar o recurso do cache dessa maneira, para não analisar e avaliar o script quando você está carregando no cache, leia mais sobre profissionais de serviço aqui
exemplo
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
});
}
}));
});
como você pode ver, isso não é uma coisa dependente do webpack , isso está fora do escopo do webpack; no entanto, com a ajuda do webpack, você pode dividir seu pacote, o que ajudará a utilizar melhor o trabalhador do serviço
if (false) import(…)
- Duvido que o webpack faça análise de código morto?