preload webpack plugin
3.0.0 alpha 1
Depreciado: um garfo deste projeto, https://github.com/vuejs/preload-webpack-plugin pode ser usado.
Um plug -in do Webpack para conectar automaticamente a subida assíncrona (e outros tipos) de pedaços de JavaScript usando <link rel='preload'> . Isso ajuda no carregamento preguiçoso.
NOTA: Este é um plug-in de extensão para html-webpack-plugin -um plug-in que simplifica a criação de arquivos HTML para servir seus pacotes WebPack.
A pré -carga é um padrão da Web destinado a melhorar o desempenho e o carregamento granular de recursos. É uma busca declarativa que pode dizer a um navegador para começar a buscar uma fonte porque um desenvolvedor sabe que o recurso será necessário em breve. Preload: Para que serve? é uma leitura recomendada se você nunca usou o recurso antes.
Em aplicativos da Web simples, é direto especificar caminhos estáticos para os scripts que você gostaria de pré -carregar - especialmente se é improvável que seus nomes ou locais mudem. Em aplicativos mais complexos, o JavaScript pode ser dividido em "pedaços" (que representam rotas ou componentes) em nomes dinâmicos. Esses nomes podem incluir hashes, números e outras propriedades que podem mudar a cada compilação.
Por exemplo, chunk.31132ae6680e598f8879.js .
Para facilitar o arame de pedaços assíncronos para carregamento preguiçoso, este plug-in oferece uma maneira de conectá-los usando <link rel='preload'> .
Este módulo requer webpack v4 e acima. Também exige que você esteja usando html-webpack-plugin no seu projeto WebPack.
Primeiro, instale o pacote como uma dependência em seu package.json :
$ npm install --save-dev preload-webpack-plugin Na sua configuração webpack, require() o plug -in de pré -carga da seguinte forma:
const PreloadWebpackPlugin = require ( 'preload-webpack-plugin' ) ; E, finalmente, adicione o plug -in à matriz plugins da sua configuração do WebPack após HtmlWebpackPlugin :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( )
] Quando os arquivos de pré -carregamento, o plug -in usará diferente as o atributo depende do tipo de arquivo. Para cada arquivo termina com .css , o plug -in a pré -carregará com as=style , para cada arquivo termina com .woff2 , o plug -in pré -carregará com as=font , enquanto para todos os outros arquivos, as=script será usado.
Se você não prefere determinar as atributo depende do sufixo do nome do arquivo, também pode nomeá -lo explicitamente usando as :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
as : 'script'
} )
] Caso você precise de mais controle de granulação fina do atributo as , você também pode fornecer uma função aqui. Ao usá -lo, o nome de entrada será fornecido como parâmetro e a própria função deve retornar uma string 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' ;
}
} )
] Observe que, se as=font for usada na pré -carga, o crossorigin também será adicionado. Explica pode ser encontrado neste artigo, e uma lista de valores as pode ser encontrada no MDN.
Por padrão, o plug -in assumirá que os pedaços de script assíncronos serão pré -carregados. Este é o equivalente a:
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é -dados a seguir serão injetadas no documento <head> :
< link rel =" preload " as =" script " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" preload " as =" script " href =" chunk.d15e7fdfc91b34bb78c4.js " > Você também pode configurar o plug -in para pré -carregar todos os pedaços (fornecedor, assíncrono e pedaços normais) usando include: 'allChunks' ou apenas pedaços iniciais de pré -carga com include: 'initial' .
É muito comum no Webpack usar carregadeiras como file-loader para gerar ativos para tipos específicos, como fontes ou imagens. Se você deseja pré -carregar esses arquivos também, mesmo que eles não pertencem a um pedaço, você pode usar include: 'allAssets' .
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : 'allChunks' // or 'initial', or 'allAssets'
} )
] Caso você trabalhe com pedaços nomeados, você pode especificar explicitamente quais include a aprovação de uma matriz:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
include : [ 'home' ]
} )
]irá injetar exatamente isso:
< link rel =" preload " as =" script " href =" home.31132ae6680e598f8879.js " > Pode haver pedaços que você não deseja ter pré -carregado (SourCemaps, por exemplo). Antes de pré -carregar cada pedaço, este plug -in verifica se o arquivo não corresponde a nenhum regex na opção fileBlacklist . O valor padrão desta lista negra é [/.map/] , o que significa que nenhum fonte de fonte será pré -carregado. Você pode facilmente substituir isso:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .whatever / ]
} )A passagem de sua própria matriz substituirá o padrão; portanto, se você quiser continuar filtrando o SourCemaps junto com suas próprias configurações personalizadas, precisará incluir o Regex para o SourCemaps:
new PreloadWebpackPlugin ( {
fileBlacklist : [ / .map / , / .whatever / ]
} ) Você pode não querer pré -carregar os recursos em alguns dos seus arquivos HTML. Você pode usar excludeHtmlNames para informar este plug -in para ignorar um ou mais arquivos.
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' ] ,
} ) Se você deseja usar dicas de recursos (como prefetch ) em vez de preload , este plug -in também suporta a fiação.
Pré -busca:
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'prefetch'
} )
]Para os pedaços assíncronos mencionados anteriormente, o plug -in atualizaria seu HTML para o seguinte:
< link rel =" prefetch " href =" chunk.31132ae6680e598f8879.js " >
< link rel =" prefetch " href =" chunk.d15e7fdfc91b34bb78c4.js " > Os elementos <link> têm a capacidade de aceitar atributos de mídia. Eles podem aceitar tipos de mídia ou consultas de mídia completas, permitindo que você faça a pré-carga responsiva.
Você pode passar o valor do atributo de mídia na opção media :
plugins: [
new HtmlWebpackPlugin ( ) ,
new PreloadWebpackPlugin ( {
rel : 'preload' ,
media : '(min-width: 600px)'
} )
] Se você encontrou um erro ou tenha problemas, registre um problema.
Os patches são incentivados e podem ser submetidos à compra deste projeto e enviando uma solicitação de tração através do GitHub.
src/index.js e src/lib/ contém a fonte principal do plug -in. test/ contém testes.
Teste o plugin:
$ npm install
$ npm run testO projeto está escrito no ES2015 e é transpilado para suportar o nó 6 e acima.
preload os recursos que um usuário é improvável de precisar. Isso pode desperdiçar sua largura de banda.preload para a sessão atual, se você acha que um usuário provavelmente visitará a próxima página. Não há 100% de garantia de itens pré -carregados acabará no cache HTTP e lê localmente além desta sessão.prefetch e preconnect . Os recursos pré -buscados são mantidos no cache HTTP por pelo menos 5 minutos (no Chrome), independentemente da criação do recurso. Suporte nativo do Webpack: A partir da versão em v4.6.0 do Webpack, há suporte nativo para gerar pré -busca e pré -carga <link> s via "Magic" Comentários em suas instruções import() .
Script-ext-html-webpack-plugin: aprimora html-webpack-plugin com opções, incluindo 'assíncrona', 'adiente', 'módulo' e 'pré-carga'. A partir de v1.7.0, ele suporta pedaços de assíncronos.
Recursos-não-Webpack-Plugin: automaticamente os dicas de recursos de fios para seus recursos. Atualmente, este plugin não oferece suporte a pedaços assíncronos.
Copyright 2019 Google, Inc.
Licenciado para a Apache Software Foundation (ASF) sob um ou mais contratos de licença de contribuintes. Consulte o arquivo de aviso distribuído com este trabalho para obter informações adicionais sobre a propriedade de direitos autorais. O ASF licencia este arquivo para você sob a licença Apache, versão 2.0 (a "licença"); Você não pode usar esse arquivo, exceto em conformidade com a licença. Você pode obter uma cópia da licença em
http://www.apache.org/license/license-2.0
A menos que exigido pela lei aplicável ou acordada por escrito, o software distribuído pela licença é distribuído "como está", sem garantias ou condições de qualquer tipo, expressa ou implícita. Consulte a licença para o idioma específico que rege as permissões e limitações sob a licença.
