preload webpack plugin
3.0.0 alpha 1
Deprecido: una bifurcación de este proyecto, https://github.com/vuejs/preload-webpack-plugin se puede usar en su lugar.
Un complemento webpack para cablear automáticamente asíncrono (y otros tipos) de fragmentos de JavaScript usando <link rel='preload'> . Esto ayuda con la carga perezosa.
Nota: Este es un complemento de extensión para html-webpack-plugin , un complemento que simplifica la creación de archivos HTML para servir sus paquetes de Webpack.
Preload es un estándar web destinado a mejorar el rendimiento y la carga granular de recursos. Es una ganancia declarativa que puede decirle a un navegador que comience a obtener una fuente porque un desarrollador sabe que el recurso será necesario pronto. Precarga: ¿Para qué es bueno? es una lectura recomendada si no ha usado la función antes.
En aplicaciones web simples, es directo especificar rutas estáticas a los scripts que desea precargar, especialmente si es poco probable que sus nombres o ubicaciones cambien. En aplicaciones más complejas, JavaScript se puede dividir en "fragmentos" (que representan rutas o componentes) con nombres dinámicos. Estos nombres pueden incluir hashes, números y otras propiedades que pueden cambiar con cada compilación.
Por ejemplo, chunk.31132ae6680e598f8879.js .
Para facilitar el cableado de los trozos de asíncrono para la carga perezosa, este complemento ofrece una forma de inclinarlos usando <link rel='preload'> .
Este módulo requiere Webpack V4 y superior. También requiere que esté utilizando html-webpack-plugin en su proyecto webpack.
Primero, instale el paquete como una dependencia en su package.json :
$ npm install --save-dev preload-webpack-plugin En su configuración webpack, require() el complemento de precarga de la siguiente manera:
const PreloadWebpackPlugin = require ( 'preload-webpack-plugin' ) ; Y finalmente, agregue el complemento a la matriz plugins de su configuración de webpack después de HtmlWebpackPlugin :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( )
] Al precargar archivos, el complemento utilizará un atributo as diferente depende del tipo de cada archivo. Para cada archivo termina con .css , el complemento lo precargará con as=style , para cada archivo termina con .woff2 , el complemento lo precargará con as=font , mientras que para todos los demás archivos, as=script .
Si no prefiere determinar as atributo, depende del sufijo del nombre de archivo, también puede nombrarlo explícitamente usando as :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
as : 'script'
} )
] En caso de que necesite más control de grano fino del atributo as , también puede proporcionar una función aquí. Al usarlo, el nombre de la entrada se proporcionará como el parámetro, y la función misma debe devolver una cadena para as atributo:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
as ( entry ) {
if ( / .css$ / . test ( entry ) ) return 'style' ;
if ( / .woff$ / . test ( entry ) ) return 'font' ;
if ( / .png$ / . test ( entry ) ) return 'image' ;
return 'script' ;
}
} )
] Tenga en cuenta que si as=font se usa en la precarga, también se agregará la crossorigin . Explica que se puede encontrar en este artículo, y una lista de valores comunes as se puede encontrar en MDN.
Por defecto, el complemento asumirá que los fragmentos de script Async se precargarán. Este es el equivalente de:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'asyncChunks'
} )
] Para un proyecto que genere dos scripts async con nombres generados dinámicamente, como chunk.31132ae6680e598f8879.js y chunk.d15e7fdfc91b34bb78c4.js , las siguientes precomisos se inyectarán en el documento <head> ::
< link rel =" preload " as =" script " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" preload " as =" script " href =" chunk.d15e7fdfc91b34bb78c4.js " > También puede configurar el complemento para precargar todos los fragmentos (proveedor, async y fragmentos normales) Usando include: 'allChunks' , o solo trozos iniciales de precarga con include: 'initial' .
Es muy común en Webpack usar cargadores como file-loader para generar activos para tipos específicos, como fuentes o imágenes. Si desea precargar estos archivos también, incluso si no pertenecen a un fragmento, puede usar include: 'allAssets' .
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'allChunks' // or 'initial', or 'allAssets'
} )
] En caso de que trabaje con fragmentos con nombre, puede especificar explícitamente cuáles include al pasar una matriz:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : [ 'home' ]
} )
]inyectará solo esto:
< link rel =" preload " as =" script " href =" home.31132ae6680e598f8879.js " > Puede haber trozos que no desee haber precargado (SourcEMaps, por ejemplo). Antes de precargar cada fragmento, este complemento verifica que el archivo no coincida con ningún Regex en la opción fileBlacklist . El valor predeterminado de esta lista negra es [/.map/] , lo que significa que no se precargarán los SourCeMaps. Puede anular fácilmente esto:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .whatever / ]
} )El paso de su propia matriz anulará el valor predeterminado, por lo que si desea continuar filtrando SourCeMaps junto con su propia configuración personalizada, deberá incluir el RegEx para SoCemaps:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .map / , / .whatever / ]
} ) Es posible que no desee precargar recursos en algunos de sus archivos HTML. Puede usar excludeHtmlNames para decirle a este complemento que ignore uno o más archivos.
plugins : [
new HtmlWebpackPlugin ( {
filename : 'index.html' ,
template : 'src/index.html' ,
chunks : [ 'main' ]
} ) ,
new HtmlWebpackPlugin ( {
filename : 'example.html' ,
template : 'src/example.html' ,
chunks : [ 'exampleEntry' ]
} ) ,
// Only apply the plugin to index.html, not example.html.
new PreloadWebpackPlugin ( {
excludeHtmlNames : [ 'example.html' ] ,
} ) Si desea utilizar sugerencias de recursos (como prefetch ) en lugar de preload , este complemento también admite el cableado.
Pre -captación:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'prefetch'
} )
]Para los fragmentos de Async mencionados anteriormente, el complemento actualizaría su HTML a lo siguiente:
< link rel =" prefetch " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" prefetch " href =" chunk.d15e7fdfc91b34bb78c4.js " > <link> Los elementos tienen la capacidad de aceptar atributos de medios. Estos pueden aceptar tipos de medios o consultas de medios en toda regla, lo que le permite realizar una precarga receptiva.
Puede pasar el valor para el atributo de medios en la opción media :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
media : '(min-width: 600px)'
} )
] Si ha encontrado un error o tiene problemas, presente un problema.
Se alientan los parches y se pueden enviar bifurcando este proyecto y enviando una solicitud de extracción a través de GitHub.
src/index.js y src/lib/ contiene la fuente principal para el complemento. test/ contiene pruebas.
Prueba el complemento:
$ npm install
$ npm run testEl proyecto está escrito en ES2015 y se transpila para admitir el nodo 6 y superior.
preload los recursos que es poco probable que un usuario necesite. Esto puede desperdiciar su ancho de banda.preload para la sesión actual si cree que es probable que un usuario visite la página siguiente. No hay 100% de garantía de garantía que los elementos precargados terminarán en el caché HTTP y se leerán localmente más allá de esta sesión.prefetch y preconnect . Los recursos prestados se mantienen en el caché HTTP durante al menos 5 minutos (en Chrome), independientemente de la caquiabilidad del recurso. Soporte nativo de Webpack: a partir de la versión v4.6.0 de Webpack, existe un soporte nativo para generar tanto prejuicio como precargado <link> s a través de comentarios "mágicos" en sus declaraciones import() .
script-ext-html-webpack-plugin: mejora html-webpack-plugin con opciones que incluyen 'async', 'defer', 'módulo' y 'precarga'. A partir de V1.7.0, admite fragmentos de async.
Recursos de recursos-Webpack-Plugin: aloja automáticamente sugerencias de recursos para sus recursos. Este complemento actualmente no admite fragmentos de async.
Copyright 2019 Google, Inc.
Licenciado a Apache Software Foundation (ASF) bajo uno o más acuerdos de licencia de contribuyentes. Consulte el archivo de notificación distribuido con este trabajo para obtener información adicional sobre la propiedad de los derechos de autor. El ASF le otorga este archivo bajo la licencia Apache, versión 2.0 (la "licencia"); No puede usar este archivo, excepto de conformidad con la licencia. Puede obtener una copia de la licencia en
http://www.apache.org/licenses/license-2.0
A menos que la ley aplicable sea requerida o acordado por escrito, el software distribuido bajo la licencia se distribuye de manera "como es", sin garantías o condiciones de ningún tipo, ya sea expresas o implícitas. Consulte la licencia para los permisos y limitaciones de rigor de idioma específico bajo la licencia.
