ACTUALIZAR
Puede usar preload-webpack-plugin con html-webpack-plugin , le permitirá definir qué precargar en la configuración e insertará automáticamente etiquetas para precargar su fragmento
tenga en cuenta que si está utilizando webpack v4 a partir de ahora, tendrá que instalar este complemento utilizando preload-webpack-plugin@next
ejemplo
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: 'asyncChunks'
})
]
Para un proyecto que genera dos scripts asíncronos con nombres generados dinámicamente, como chunk.31132ae6680e598f8879.js
y
chunk.d15e7fdfc91b34bb78c4.js
, las siguientes precargas se inyectarán en el documentohead
<link rel="preload" as="script" href="chunk.31132ae6680e598f8879.js">
<link rel="preload" as="script" href="chunk.d15e7fdfc91b34bb78c4.js">
ACTUALIZACIÓN 2
si no quieres precargar todo el fragmento asíncrono pero solo específico una vez que puedes hacerlo también
puede usar el complemento babel de migcoder o con los preload-webpack-plugin
siguientes
primero tendrá que nombrar ese fragmento asíncrono con ayuda de webpack
magic comment
ejemplo
import(/* webpackChunkName: 'myAsyncPreloadChunk' */ './path/to/file')
y luego en la configuración del complemento use ese nombre como
plugins: [
new HtmlWebpackPlugin(),
new PreloadWebpackPlugin({
rel: 'preload',
include: ['myAsyncPreloadChunk']
})
]
En primer lugar, veamos el comportamiento del navegador cuando especificamos script
etiqueta o link
etiqueta para cargar el script
- cada vez que un navegador encuentre una
script
etiqueta, la cargará, la analizará y la ejecutará de inmediato
- solo puede retrasar el análisis y la evaluación con ayuda
async
y
defer
etiquetar solo hasta elDOMContentLoaded
evento
- puede retrasar la ejecución (evaluación) si no inserta la etiqueta del script (solo precargue con
link
)
ahora hay alguna otra forma de hackey no recomendada : si envía su script completo string
o comment
(porque el tiempo de evaluación del comentario o cadena es casi insignificante) y cuando necesita ejecutar eso, puede usarlo Function() constructor
o eval
no se recomiendan ambos
Otro trabajador de servicio de aproximación : (esto preservará su evento de caché después de recargar la página o el usuario se desconecta después de cargar la caché)
En el navegador moderno, puede usar service worker
para buscar y almacenar en caché un recurso (JavaScript, imagen, css cualquier cosa) y cuando la solicitud del hilo principal para ese recurso puede interceptar esa solicitud y devolver el recurso de la caché de esta manera, no está analizando y evaluando el script cuando lo está cargando en la memoria caché lea más sobre los trabajadores de servicios aquí
ejemplo
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 puede ver, esto no depende del paquete web , está fuera del alcance del paquete web; sin embargo, con la ayuda del paquete web, puede dividir su paquete, lo que ayudará a utilizar mejor al trabajador del servicio
if (false) import(…)
- Dudo que webpack haga análisis de código muerto?