首頁  >  文章  >  web前端  >  開發工具不是必需的

開發工具不是必需的

PHPz
PHPz原創
2024-09-07 06:31:02881瀏覽

Devtool is not necessary

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

採用微前端方法的原因是為了降低儀表板上的複雜性。我對這個挑戰感到很興奮,並且全心投入。

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

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

以上是開發工具不是必需的的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn