AGGIORNARE
Puoi usare preload-webpack-plugin con html-webpack-plugin ti permetterà di definire cosa precaricare nella configurazione e inserirà automaticamente i tag per precaricare il tuo pezzo
nota se stai usando webpack v4 fin da ora dovrai installare questo plugin usando preload-webpack-plugin@next
esempio
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'asyncChunks'
})
]
Per un progetto che genera due script asincroni con nomi generati dinamicamente, come chunk.31132ae6680e598f8879.js
e
chunk.d15e7fdfc91b34bb78c4.js
, i seguenti precarichi verranno iniettati nel documentohead
<link rel="preload" as="script" href="chunk.31132ae6680e598f8879.js">
<link rel="preload" as="script" href="chunk.d15e7fdfc91b34bb78c4.js">
AGGIORNAMENTO 2
se non vuoi precaricare tutto il pezzo asincrono ma solo una volta specifico puoi farlo
o puoi usare il plug-in babel di migcoder o con il preload-webpack-plugin
seguente seguito
per prima cosa dovrai nominare quel pezzo asincrono con l'aiuto di webpack
magic comment
esempio
import(/* webpackChunkName: 'myAsyncPreloadChunk' */ './path/to/file')
e poi nella configurazione del plugin usa quel nome come
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: ['myAsyncPreloadChunk']
})
]
Prima di tutto vediamo il comportamento del browser quando specifichiamo script
tag o link
tag per caricare lo script
- ogni volta che un browser incontra un
script
tag, lo carica lo analizza e lo esegue immediatamente
- puoi solo ritardare l'analisi e la valutazione con l'aiuto
async
e
defer
tag solo finoDOMContentLoaded
all'evento
- puoi ritardare l'esecuzione (valutazione) se non inserisci il tag dello script (precaricalo solo con
link
)
ora ci sono altri modi di hackey non raccomandati se spedisci l'intero script e string
o comment
(perché il tempo di valutazione del commento o della stringa è quasi trascurabile) e quando è necessario eseguire ciò che è possibile utilizzare Function() constructor
o eval
entrambi non sono consigliati
Operatori del servizio Approach : (questo manterrà l'evento cache dopo il ricaricamento della pagina o l'utente non sarà in linea dopo il caricamento della cache)
Nel browser moderno è possibile utilizzare service worker
per recuperare e memorizzare nella cache un ricorso (JavaScript, immagine, css qualunque) e quando la richiesta principale del thread per quel ricorso è possibile intercettare quella richiesta e restituire il ricorso dalla cache in questo modo non si analizza e si valuta lo script quando lo stai caricando nella cache leggi di più sugli operatori del servizio qui
esempio
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
});
}
}));
});
come vedi non è una cosa dipendente dal webpack , questo non rientra nell'ambito del webpack, tuttavia con l'aiuto del webpack puoi dividere il tuo bundle che ti aiuterà a utilizzare meglio il lavoratore dell'assistenza
if (false) import(…)
- Dubito che il webpack analizzi il codice morto?