L'outil de développement n'est pas nécessaire

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 en utilisant 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'ai utilisé 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 venait pas de la bibliothèque CSS ou du code mais de 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'infos 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 vous trouverez cela utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!