幾個月前我正在開發一個前端專案。該專案是一個微前端，旨在整合到遺留儀表板上。

採用微前端方法的原因是為了降低儀表板上的複雜度。我對這個挑戰感到興奮並投入其中。

我使用 webpack、react 和 typescript 設定微前端。我使用 chakra ui 作為 CSS-IN-JS 框架，使用 axios 進行 API 集成，一切正常。然而，該專案的建置大小約為 14mb。對微前端來說，這個數字大得離譜。這導致整合它的儀表板中的頁面響應非常緩慢。因此，我面臨著優化建置的新挑戰。

我認為構建是如此之大，因為我使用了 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/',
  },
  ...
}

綜上所述，我遇到的問題的解決方案只需刪除一行程式碼即可解決。

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

感謝您的閱讀。我希望您覺得這有幫助。