Je travaillais sur un projet frontend il y a quelques mois. Le projet était une microfrontend destinée à être intégrée sur un tableau de bord existant.

La raison de l'approche microfrontend était de réduire la complexité du tableau de bord. J'étais enthousiasmé par ce défi et je me suis plongé dedans.

J'ai configuré le microfrontend à l'aide de webpack, React et TypeScript. J'ai utilisé chakra ui comme framework CSS-IN-JS, axios pour l'intégration API et tout a bien fonctionné. Cependant, la taille de construction du projet était d'environ 14 Mo. Pour une microfrontend, c’était ridiculement grand. Cela a conduit à une réponse très lente des pages dans le tableau de bord où il a été intégré. On m'a donc présenté un nouveau défi pour optimiser la construction.

Je pensais que la version était si grande parce que j'utilisais un framework CSS-IN-JS pour le style. J'ai donc refactorisé toute la base de code de chakra-ui à sass. Devinez quoi, la taille de la construction est passée de 14 Mo à environ 21 Mo ??.

C'est à ce moment-là que j'ai su que le problème ne concernait pas la bibliothèque CSS ou le code mais la configuration du webpack. J'ai commencé beaucoup d'essais et d'erreurs avec la configuration du webpack. J'ai ensuite découvert que lorsque j'avais supprimé l'outil de développement, la taille de la build passait de 14 Mo à environ 600 Ko. Ensuite, j'ai vérifié la documentation du webpack sur devtool. J'ai réalisé que ce n'était pas obligatoire. Plus d'informations ici :.

Voici un aperçu de la configuration de mon 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/',
  },
  ...
}

En résumé, la solution au problème que j'ai rencontré a été résolue en supprimant simplement une ligne de code.

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

Merci d'avoir lu. J'espère que cela vous sera utile.