javascript - react - ¿Comprueba si un archivo se descargó/requirió ya en Webpack?
webpack react (2)
Webpack deduplicará todos los módulos necesarios varias veces, y los módulos que ya están cargados no se inicializarán de nuevo (siguiendo la especificación CommonJS). Entonces, básicamente, solo necesitas todas tus dependencias directamente y estás listo.
Más importante aún: no envuelva sus necesidades si usa el paquete web. El análisis estático para determinar qué módulos está utilizando realmente dejará de funcionar con precisión, y el paquete web incluirá demasiado.
Trabajo en una empresa que require implementación personalizada. La implementación le permite requerir un módulo solo si ya se ha descargado. Si una ruta de código depende de un módulo, pero la ruta de código no siempre es correcta, el módulo no siempre es necesario. Esto redujo drásticamente nuestro tamaño de archivo.
Aquí hay un ejemplo de cómo puede ser útil:
if (page === PROFILE) {
// ProfileHelper should already be downloaded if we''re on the profile page.
if (isRequired(''ProfileHelper'')) {
const ProfileHelper = require(''ProfileHelper'');
ProfileHelper.doSomething();
} else {
LogError(''ProfileHelper isn/'t loaded on the profile page.'');
}
} else if (page === FEED) {
// FeedHelper should already be downloaded if we''re on the feed page.
if (isRequired(''FeedHelper'')) {
const FeedHelper = require(''FeedHelper'');
FeedHelper.doSomething();
} else {
LogError(''FeedHelper isn/'t loaded on the feed page.'');
);
}
ProfileHelper no se carga en las páginas de FeedHelper y FeedHelper no se carga en las páginas de perfil. ¿Tiene Webpack algo como esto?
Hay una solución potencial aquí: https://github.com/webpack/webpack/issues/526
Sin embargo, esto fue hace 2 años y el código parece bastante hacky. ¿Hay una mejor manera? Si esta es la mejor manera, avíseme mediante una respuesta y la marcaré como la respuesta correcta.
Editar para aclarar:
Si ProfileHelper y FeedHelper todo el tiempo, uno de los módulos no se utilizará. Como máximo, uno de ellos se descarga en cualquier página determinada.
Esto no tiene nada que ver con la deduplicación.
Editar para reclamo autorizado
La compañía es Facebook. Facebook genera muchos paquetes diferentes para diferentes páginas, pero esos paquetes comparten muchos archivos. Esos archivos se comportan de manera diferente en función de la página en la que se encuentran. A menudo, no todos los módulos a los que hace referencia un archivo se usarán para una página determinada. En este caso, esos archivos simplemente no están agrupados.
Este enfoque es antitético a la agrupación con webpack.
Las instrucciones de requerimiento son lo que instruye al paquete web sobre qué compilar. No compilará nunca sus requisitos condicionales porque se evaluarán en tiempo de ejecución (pero los paquetes de paquetes web se compilan previamente) y el paquete web no habrá agregado ninguno de ellos en sus paquetes.
Lo que está buscando es dividir el código: https://webpack.js.org/guides/code-splitting-require/
Tutoriales: