optimization - namedmodulesplugin - ¿Cómo optimizar el tiempo de compilación de webpack usando la herramienta prefetchPlugin & analyst?

webpack namedmodulesplugin

Question

Investigación previa:

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

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

Sugerencias de estadísticas de compilación

Hay una herramienta de análisis que visualiza su compilación y también proporciona una pista de cómo se puede 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 largos

Utilice la captación previa para aumentar el rendimiento de la compilación. Busque previamente un módulo desde el medio de la cadena .

Excavé la web al revés 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 crea incluso antes de que se requiera. Esto puede aumentar el rendimiento. Intente perfilar primero la compilación para determinar puntos de captación previa inteligentes .

Mis preguntas:

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

Realmente apreciaré algunos ejemplos

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

Answer 1

En el centro de su cadena probablemente haya react-transform-hmr/index.js ya que comienza aproximadamente a la mitad. Puede probar PrefetchPlugin(''react-transform-hmr/index'') y volver a ejecutar su perfil para ver si ayuda a acelerar su tiempo total de construcción.

Answer 2

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 (en relación con el contexto). El contexto en su caso sería /absolute/path/to/your/project/node_modules/react-transform-har/ suponiendo que la tilde en su captura de pantalla se refiere a node_modules según la resolución de node_module del paquete web.

El módulo de captación previa real no debería tener más de tres dependencias de módulo de profundidad. Entonces, en su caso, isFunction.js es el módulo con la cadena de compilación larga e idealmente debe ser precargado en getNative.js

Sin embargo, sospecho que hay algo raro en su configuración, porque sus dependencias de la cadena de compilación se refieren a las dependencias del módulo, que debería ser optimizado automáticamente por webpack. No estoy seguro de cómo obtuvo eso, pero en nuestro caso, no vemos ninguna advertencia sobre cadenas de compilación largas en node_modules. La mayoría de nuestras cadenas de construcción largas se deben a componentes de reacción profundamente anidados que requieren scss. es decir:

De todos modos, querrás agregar un nuevo complemento para cada una de las advertencias, de esta manera:

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.