Si ya conoces los módulos y las importaciones en Javascript, es bueno hablar de un cierto tipo de importación denominado Barrel import que nos podremos encontrar en algunos casos. A priori, puede parecer una forma muy interesante y cómoda de hacer importaciones, pero tiene grandes desventajas, así que vamos a explicarlo todo.
¿Qué son los Barrel imports?
Los barrel imports son una forma de importar varios módulos Javascript a través de un fichero que hace de intermediario y re-exporta varios módulos externos. Se denomina «barril» por el efecto de caer y rodar de los barriles y llevarse cosas por delante.
Generalmente, utilizar barrel imports se percibe por desarrolladores principiantes como una forma genial de reducir código y simplificar importaciones:
// En nuestro fichero principal, importamos de esta forma
import { module1, module2, module3 } from "./modules/index.js";
// En /modules/index.js exportamos ficheros de rutas externas
export { module1 } from "./module1.js";
export { module2 } from "./module2.js";
export { module3 } from "./module3.js";
Observa que el fichero /modules/index.js lo único que está haciendo es re-exportar los módulos de otros ficheros, de modo que los centraliza en ese fichero. Esto es lo que se conoce como un barrel import.
Ventajas de los barrel imports
Las ventajas de utilizar un barrel import son muy fáciles de comprender desde el entorno de desarrollo, donde está trabajando el programador. Sin embargo, puede llegar a tener grandes desventajas (sobre todo de rendimiento) en entornos donde se utilizan automatizadores o bundlers, especialmente cuando se utilizan frameworks de Javascript que utilizan tree-shaking (lo explicaremos más adelante).
Veamos algunas de ellas:
- 🟩 Las rutas de las importaciones son más cortas y sencillas.
- 🟩 Centraliza las exportaciones en un sólo punto.
// Sin barrel import
import { module1 } from "./modules/module1.js";
import { module2 } from "./modules/module2.js";
import { module3 } from "./modules/module3.js";
// Con barrel import
import { module1, module2, module3 } from "./modules/index.js";
Como se puede ver en el ejemplo anterior, es evidente que hay una simplificación de cara a la forma de importar y utilizar el barrel import, por lo que su utilización es positiva en este aspecto. Sin embargo, ten en cuenta que como contrapartida, este tipo de importaciones oculta la ruta real de los módulos, lo que podría llegar a complicar la lectura y depuración de la aplicación.
Desventajas de los barrel imports
Veamos ahora alguna de las desventajas de utilizar barrel imports en nuestro código:
- 🟥 El tree-shaking no puede eliminar código muerto, y se cargan módulos que no se usan.
// /modules/index.js
export { module1 } from "./module1.js";
export { module2 } from "./module2.js";
export { module3 } from "./module3.js";
// /main.js
import { module1 } from "./modules/index.js";
El tree-shaking es un proceso de optimización que realizan los automatizadores o bundlers como Vite, Webpack, Rollup u otros, que permiten eliminar el código no utilizado de una aplicación o página web, reduciendo el tamaño final del Javascript generado y aumentando la velocidad de descarga de dicho Javascript en la página final por parte del navegador del usuario.
En este ejemplo, sólo estamos importando module1, pero el tree-shaking de una de estas herramientas no podrá eliminar module2 y module3 porque no sabe realmente que está importando desde index.js. Por lo tanto, terminará incluyendo código, que de no utilizar barrel imports hubiera eliminado.
Además de esta razón, que es una de las principales, también pueden ocurrir varios problemas relacionados:
- 🟥 El tamaño del Javascript generado (bundle) es mayor.
- 🟥 La duración de crear el Javascript generado (bundle) es mayor.
- 🟥 Pueden existir referencias circulares y causar errores.
- 🟥 Oculta la ruta real de ciertos módulos, y complica la depuración.
- 🟥 Puede existir duplicidad de código si importamos incorrectamente desde el barrel.
En resumen, ten en cuenta estos detalles y no utilices barrel imports si va a repercutir negativamente en el desarrollo de tu página o aplicación web.
