私は数か月前、フロントエンド プロジェクトに取り組んでいました。このプロジェクトは、従来のダッシュボードに統合されることを目的としたマイクロフロントエンドでした。

マイクロフロントエンド アプローチの理由は、ダッシュボードの複雑さを軽減することでした。私はこの挑戦に興奮し、それに飛び込みました。

webpack、react、typescript を使用してマイクロフロントエンドをセットアップしました。 CSS-IN-JS フレームワークとして Chakra ui を使用し、API 統合に axios を使用しましたが、すべてうまくいきました。ただし、プロジェクトのビルド サイズは約 14 MB でした。マイクロフロントエンドとしては、これは途方もなく大規模でした。これにより、統合されているダッシュボードでのページの応答が非常に遅くなりました。そこで私は、ビルドを最適化するという新たな課題に直面しました。

スタイリングに CSS-IN-JS フレームワークを使用したため、ビルドが大きくなったと思いました。そこで、chakra-ui から sass までコードベース全体をリファクタリングしました。なんと、ビルド サイズが 14MB から約 21MB に増加したのです。

そのとき、問題は CSS ライブラリやコードに関するものではなく、Webpack 構成に関するものであることがわかりました。 Webpack の設定について多くの試行錯誤を開始しました。その後、devtool を削除すると、ビルド サイズが 14mb から約 600kb に増加したことがわかりました。次に、devtool に関する Webpack ドキュメントを確認しました。強制ではないことに気づきました。詳細はこちら:.

これが私の 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/',
  },
  ...
}

要約すると、私が遭遇した問題の解決策は、コードを 1 行削除するだけで修正されました。

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

読んでいただきありがとうございます。これがお役に立てば幸いです。