Investigación previa:

Como dice la wiki de webpack, es posible utilizar la herramienta de análisis para optimizar el rendimiento de la construcción:

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

Sugerencias de estadísticas de construcción

Existe una herramienta de análisis que visualiza su compilación y también proporciona algunas pistas sobre cómo se pueden optimizar el tamaño y el rendimiento de la compilación .

Puede generar el archivo JSON requerido ejecutando webpack --profile --json> stats.json

Genero el archivo de estadísticas ( disponible aquí ), lo cargué en la herramienta de análisis de webpack
y en la pestaña Sugerencias le dije que usara el prefetchPlugin:

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

Cadenas de construcción de módulos largas

Utilice la captación previa para aumentar el rendimiento de la compilación. Obtenga previamente un módulo de la mitad de la cadena .

Busqué en la web de adentro hacia afuera para encontrar la única documentación disponible en prefechPlugin es esta:

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

PrefetchPlugin

new webpack.PrefetchPlugin([context], request)

Una solicitud de un módulo normal, que se resuelve y construye incluso antes de que ocurra una solicitud. Esto puede mejorar el rendimiento. Intente perfilar la construcción primero para determinar puntos de precarga inteligentes .

Mis preguntas:

• ¿Cómo utilizar correctamente prefetchPlugin?
• ¿Cuál es el flujo de trabajo adecuado para usarlo con la herramienta Analizar?
• ¿Cómo sé si el prefetchPlugin funciona? como puedo medirlo
• ¿Qué significa captar previamente un módulo de la mitad de la cadena ?

Realmente apreciaré algunos ejemplos

Ayúdenme a hacer de esta pregunta un recurso valioso para el próximo desarrollador que quiera usar prefechPlugin y las herramientas de análisis. Gracias.

Sí, la documentación del complemento de búsqueda previa es prácticamente inexistente. Después de descubrirlo por mí mismo, es bastante simple de usar y no tiene mucha flexibilidad. Básicamente, se necesitan dos argumentos, el contexto (opcional) y la ruta del módulo (relativa al contexto). El contexto en su caso sería /absolute/path/to/your/project/node_modules/react-transform-har/asumir que la tilde en su captura de pantalla se refiere a node_modulesla resolución node_module del paquete web .

Idealmente, el módulo de captación previa real no debería tener más de tres dependencias de módulo. Por lo que en su caso isFunction.jses el módulo con la cadena larga acumulación e idealmente debe ser precargados engetNative.js

Sin embargo, sospecho que hay algo extraño en su configuración, porque las dependencias de su cadena de compilación se refieren a dependencias de módulos, que deberían ser optimizadas automáticamente por webpack. No estoy seguro de cómo lo consiguió, pero en nuestro caso, no vemos ninguna advertencia sobre cadenas de compilación largas en node_modules. La mayoría de nuestras cadenas de compilación largas se deben a componentes de reacción profundamente anidados que requieren scss. es decir:

Independientemente, querrá agregar un nuevo complemento para cada una de las advertencias, así:

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

El segundo argumento debe ser una cadena a la ubicación relativa del módulo. Espero que esto tenga sentido.

La mitad de su cadena probablemente se encuentra react-transform-hmr/index.jsya que comienza aproximadamente a la mitad. Puede intentar PrefetchPlugin('react-transform-hmr/index')volver a ejecutar su perfil para ver si ayuda a acelerar el tiempo total de creación.