Como otimizar o tempo de construção do webpack usando a ferramenta prefetchPlugin e analisar?

Pesquisa anterior:

Como diz o wiki do webpack, é possível usar a ferramenta de análise para otimizar o desempenho de construção:

de: https://github.com/webpack/docs/wiki/build-performance#hints-from-build-stats

Dicas de estatísticas de construção

Há uma ferramenta de análise que visualiza sua construção e também fornece algumas dicas de como o tamanho e o desempenho da construção podem ser otimizados .

Você pode gerar o arquivo JSON necessário executando webpack --profile --json> stats.json

Eu gero o arquivo de estatísticas ( disponível aqui ), carrego-o na ferramenta analize do webpack
e na aba Hints eu disse para usar o prefetchPlugin:

de: http://webpack.github.io/analyse/#hints

Longas cadeias de construção de módulo

Use a pré - busca para aumentar o desempenho de construção. Obtenha previamente um módulo do meio da cadeia .

Eu cavei a web de dentro para fora para encontrar a única documentação disponível no prefechPlugin é esta:

de: https://webpack.js.org/plugins/prefetch-plugin/

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Uma solicitação de um módulo normal, que é resolvida e construída antes mesmo de ocorrer uma solicitação. Isso pode aumentar o desempenho. Tente primeiro traçar o perfil da construção para determinar pontos de pré-busca inteligentes .

Minhas perguntas:

Como usar o prefetchPlugin corretamente?
Qual é o fluxo de trabalho certo para usá-lo com a ferramenta Analyze?
Como posso saber se o prefetchPlugin funciona? como posso medir isso?
O que significa pré - buscar um módulo do meio da cadeia ?

Eu realmente aprecio alguns exemplos

Por favor, ajude-me a tornar esta questão um recurso valioso para o próximo desenvolvedor que deseja usar as ferramentas prefechPlugin e Analyze. Obrigado.

optimization webpack

— Asaf Katz
fonte

Como devemos usar a ferramenta analisador de estatísticas? Quando eu clico em upload, nada acontece e não há botão de envio. Apenas "usar exemplo"

— TetraDev

A saída do console diz Uncaught SyntaxError: Unexpected token r in JSON at position 0ao enviar qualquer stats.json

— TetraDev

@TetraDev isso significa que você tem um erro em seu arquivo JSON. Tente abri-lo com um editor de texto e veja se há algo que não se pareça com um JSON válido. (Tenho o mesmo problema com a saída de depuração do Webpack na primeira linha).

— maufl de

Os documentos têm, > stats.jsonmas isso escreve algumas linhas extras no topo que quebram o analisador

— Alex Riina

Respostas:

Sim, a documentação do plugin de pré-busca é praticamente inexistente. Depois de descobrir por mim mesmo, é muito simples de usar e não há muita flexibilidade para ele. Basicamente, ele leva dois argumentos, o contexto (opcional) e o caminho do módulo (relativo ao contexto). O contexto em seu caso seria /absolute/path/to/your/project/node_modules/react-transform-har/assumir que o til em sua captura de tela está se referindo à resolução node_modulenode_modules do webpack .

O módulo de pré-busca real deve ter, idealmente, no máximo três dependências de módulo. Portanto, no seu caso isFunction.jsé o módulo com a longa cadeia de construção e, idealmente, deve ser pré-buscado emgetNative.js

No entanto, suspeito que haja algo estranho em sua configuração, porque as dependências da cadeia de construção estão se referindo a dependências de módulo, que devem ser otimizadas automaticamente pelo webpack. Não tenho certeza de como você conseguiu isso, mas em nosso caso, não vemos nenhum aviso sobre longas cadeias de construção em node_modules. A maioria de nossas longas cadeias de construção se deve a componentes de reação profundamente aninhados que requerem scss. ie:

Independentemente disso, você desejará adicionar um novo plug-in para cada um dos avisos, assim:

plugins: [
    new webpack.PrefetchPlugin('/web/', 'app/modules/HeaderNav.jsx'),
    new webpack.PrefetchPlugin('/web/', 'app/pages/FrontPage.jsx')
];

O segundo argumento deve ser uma string para a localização relativa do módulo. Espero que isso faça sentido.

— 4m1r
fonte

Estou tentando baixar algumas das minhas compilações e mesmo depois da explicação ainda estou muito confuso sobre como usar essa ferramenta. Você pode expandir o que significa exatamente 'contexto' e o que cada um dos parâmetros na pré-busca precisa ser? Não tenho certeza do que exatamente está sendo feito no plugin

— ThrowsException

Não uso isso há algum tempo, mas provavelmente ainda é o mesmo. Deve haver apenas dois argumentos para o plugin. Um, contexto, que é o contexto do módulo, por exemplo, app/components/module.jsxseria 'app'e acho que o segundo deveria ser a localização relativa, ou seja'components/module.jsx'

— 4m1r

Ok, terei outra chance. Eu tentei pelo menos duas dúzias de arranjos PrefetchPlugin e nada parece removê-lo da minha longa cadeia de construção. Estou tendo o mesmo problema que o pôster estava tendo onde eu tenho um módulo de nó que está na minha longa cadeia de construção e estou tentando pré-buscá-lo. Não sei se o webpack não sabe como lidar com essa situação.

— ThrowsException

Usei o plug-in de pré-busca para aumentar significativamente o desempenho do meu projeto que usa handlebars.js. Esta é a sintaxe que funcionou para mim:new webpack.PrefetchPlugin(__dirname + "/node_modules", "handlebars/runtime.js"),

— Andre

Além disso, se o que você deseja pré-buscar não for um pacote (ou seja, não node_modulesestiver dentro ), você pode simplesmente passar a string de solicitação . Observe que o primeiro argumento, contexto , é opcional.

— natchiketa

Provavelmente está no meio de sua cadeia react-transform-hmr/index.js, começando na metade. Você pode tentar PrefetchPlugin('react-transform-hmr/index')executar novamente seu perfil para ver se isso ajuda a acelerar o seu tempo total de construção.

— Aaron Jensen
fonte

só que pior .. de 2351ms a 2361ms, também gera um erro

Entry module not found: Error: Cannot resolve module 'react-transform-hmr/index' in /Users/asafkatz/Development/my-react-builerplate

— Asaf Katz

bem, uma diferença de 10 ms não é pior, a diferença é estatisticamente insignificante. Eu brincava com coisas diferentes react-transform-hmrou react-transform-hmr/index.jsetc.

— Aaron Jensen