Estoy tratando de usar la división de código en mi aplicación de reacción y, en general, funciona muy bien, pero noté algo extraño en el analizador de paquetes. Mi carpeta de componentes se carga en el primer fragmento con todos sus componentes (incluso los que solo se usan en componentes con carga diferida).
Creo que el problema es que sigo la estructura de usar archivos index.ts para exportar mis componentes: /components:
Los archivos index.ts solo exportan los componentes necesarios así
export * from './Component';esto es lo mismo que
import { Component } from './Component'; export { Component };en javascript.
Al hacerlo de esa manera, obtengo importaciones muy bonitas:
import { Component } from 'components';sin los caminos profundos y todo eso.
Pero creo que debido a ese paquete web no puede reconocer cómo dividirlo y simplemente lo empaqueta todo.
¿Hay alguna solución para esto? ¿Quizás estoy haciendo algo mal?
Utilizo la configuración predeterminada de la aplicación Create React en este momento.
export * from './Component'; Esto está causando que webpack agrupe todos los componentes que están allí en './Component' y lo que sea que importe, y así sucesivamente.
Debe exportar componentes individualmente sin usar *
Como export { Component1, Component2 } from './Component'
Además, si está utilizando Webpack 5, crea una asignación de qué componente de importación se utiliza y descarta los componentes no utilizados. Esto no está disponible en Webpack 4.