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.

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.

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.