Eu estava trabalhando em um projeto de frontend há alguns meses. O projeto era um microfrontend que deveria ser integrado em um painel legado.

O motivo da abordagem de microfrontend foi reduzir a complexidade do painel. Fiquei entusiasmado com este desafio e mergulhei nele.

Eu configurei o microfrontend usando webpack, react e typescript. Usei chakra ui como framework CSS-IN-JS, axios para integração de API e tudo funcionou bem. No entanto, o tamanho da construção do projeto foi de cerca de 14 MB. Para um microfrontend, isso era ridiculamente grande. Isso levou a uma resposta muito lenta da página no painel onde foi integrado. Então me foi apresentado um novo desafio para otimizar a construção.

Achei que a construção era tão grande porque usei uma estrutura CSS-IN-JS para o estilo. Então refatorei toda a base de código de chakra-ui para atrevimento. Adivinhe, o tamanho da compilação aumentou de 14 MB para cerca de 21 MB ??.

Foi quando eu soube que o problema não era a biblioteca css ou o código, mas sim a configuração do webpack. Comecei muitas tentativas e erros com a configuração do webpack. Descobri então que, quando removi o devtool, o tamanho da compilação passou de 14 MB para cerca de 600 KB. Então verifiquei a documentação do webpack sobre o devtool. Percebi que não é obrigatório. Mais informações aqui:.

Aqui está uma prévia da configuração do meu webpack

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/',
  },
  ...
}

Em resumo, a solução para o problema que encontrei foi corrigida com apenas a remoção de uma linha 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/',
  },
  ...
}

Obrigado pela leitura. Espero que isso seja útil para você.