Estoy usando Gatsby para construir un blog y estoy tratando de mejorar el rendimiento. También quiero implementar la división de código y la carga diferida.
Digamos que tengo que importar 2 componentes que están en la misma carpeta; Hay dos maneras de hacer esto:
Forma 1 : agrupar todos los componentes en un archivo index.ts
import { Component1, Component2 } from '../components/index.ts'Forma 2 : importe los componentes individuales que hacen referencia a la ruta específica
import { Component1 } from '../components/Component1' import { Component2 } from '../components/Component2'La primera forma se ve mejor y es más rápida de codificar, pero ¿cuáles son sus efectos en el rendimiento?
Por lo que leí en la Documentación de Gatsby , se debe preferir el segundo enfoque, porque de lo contrario, Webpack agrupará e importará también otros componentes que en realidad no necesita, aumentando así el tamaño del paquete (y afectando negativamente el rendimiento).
¿Debería convertir todas mis importaciones agrupadas en importaciones específicas y eliminar los archivos index.ts?
Si usa una versión actualizada del paquete web, la función de sacudir el árbol minimizará lo que se importa al paquete generado para cualquiera de las formas que describió.
En el enlace que proporcionó, se refiere específicamente a Gatsby v2, por lo que asumo que ya no es válido para v3 y posteriores.