Estaba trabajando en un proyecto frontend hace algunos meses. El proyecto era un microfrontend que debía integrarse en un panel heredado.

El motivo del enfoque de microfrontend fue reducir la complejidad en el tablero. Me emocioné con este desafío y me lancé a él.

Configuré el microfrontend usando webpack, reaccionar y mecanografiado. Utilicé chakra ui como marco CSS-IN-JS, axios para la integración de API y todo funcionó bien. Sin embargo, el tamaño de construcción del proyecto fue de unos 14 MB. Para una microfrontend, eso era ridículamente grande. Esto provocó una respuesta de página muy lenta en el panel donde se integró. Entonces se me presentó un nuevo desafío para optimizar la construcción.

Pensé que la compilación era así de grande porque usé un marco CSS-IN-JS para el estilo. Así que refactoricé todo el código base desde chakra-ui hasta sass. ¿Adivina qué, el tamaño de compilación aumentó de 14 MB a aproximadamente 21 MB?

Fue entonces cuando supe que el problema no es la biblioteca CSS o el código, sino la configuración del paquete web. Comencé muchas pruebas y errores con la configuración del paquete web. Luego descubrí que cuando eliminé devtool, el tamaño de compilación pasó de 14 MB a aproximadamente 600 kb. Luego revisé la documentación del paquete web sobre devtool. Me di cuenta de que no es obligatorio. Más información aquí:.

Aquí hay un adelanto de la configuración de mi paquete web

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  devtool: "eval-source-map", //remove devtool
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

En resumen, la solución al problema que encontré se solucionó simplemente eliminando una línea de código.

module.exports = merge(common, {
  name: "client",
  mode: process.env.NODE_ENV,
  entry: {
    "microfrontend": "./src/bootstrap.tsx",
  },
  output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "[name]_[hash].js",
    pathinfo: false,
    publicPath: 'http://localhost:6001/',
  },
  ...
}

Gracias por leer. Espero que esto te resulte útil.