architecture-it/vite ¶

Libreria diseñada para simplificar y potenciar la configuración de proyectos Vite con Federación.

Configuración de Proyectos¶

La librería proporciona las configuraciones básicas a implementar en los diferentes proyectos que se puede crear utilizando Vite, es decir, para aplicaciones SPA o Microfrontends (módulo y shell).

Se deberan realizar las configuraciones en el siguiente archivo de Vite: vite.config.ts.

Configuración Técnica para un Shell - Microfrontend¶

La función shellConfig sirve como un punto de partida técnico para configurar entornos de shell en proyectos de microfrontends que buscan una federación eficiente de módulos y recursos compartidos.

import { shellConfig } from "@architecture-it/vite";

export default shellConfig({
  name: "mi-shell",
  exposes: {
    // ...otras opciones específicas del shell
  },
});

Configuración Técnica para Módulo - Microfrontend¶

La función moduleConfig está diseñada para configurar proyectos Vite con Federación que necesitan exponer módulos específicos a otros proyectos.

import { moduleConfig } from "@architecture-it/vite";

export default moduleConfig({
  name: "mi-modulo",
  exposes: {
    // ...definiciones de exposiciones
  },
  // ...otras opciones específicas del módulo
});

Configuración Técnica para Aplicaciones (SPA) con Vite¶

La función spaConfig ofrece una configuración técnica para proyectos Vite que están construyendo SPAs con React.

import { spaConfig } from "@architecture-it/vite";

export default spaConfig({
  // ... configuraciones extras que se deseen agregar
});

Función resolveChunks: Lógica de División de Chunks¶

La función resolveChunks proporciona una lógica clara y eficiente para dividir la aplicación SPA en chunks (partes) específicas.

Su utilización permitirá tener una gestión precisa de las dependencias y una distribución óptima de recursos durante la construcción del proyecto. Mejorando asi la carga inicial y la eficiencia general del rendimiento de la aplicación. Se utiliza como parte de la configuración de rollupOptions en el (build) de la configuración de Vite.

La función resolveChunks toma el identificador de un archivo como entrada y devuelve una cadena que representa la identificación del chunk al que pertenece ese archivo.

import { spaConfig, resolveChunks } from "@architecture-it/vite";

export default spaConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: resolveChunks,
      },
    },
  },
});

BannerPlugin¶

El BannerPlugin es un componente personalizado diseñado para imprimir un banner informativo en la consola durante la fase de construcción o desarrollo de tu aplicación Vite.

import { spaConfig } from "@architecture-it/vite";
import { BannerPlugin } from './BannerPlugin';

export default spaConfig({
    // Agrega el plugin a la matriz de plugins
    plugins: [BannerPlugin()],

    // ... configuraciones extras que se deseen agregar
});

DynamicImport¶

Esta función se utiliza para facilitar la importación dinámica de módulos remotos en un entorno de arquitectura de microfrontends.

import {dynamicImport} from "@architecture-it/vite/dynamicImport";

const AppRemote = dynamicImport<IRemoteAppProps>("remote/App");

architecture-it/vite¶