幾個月前我正在開發一個前端專案。該專案是一個微前端,旨在整合到遺留儀表板上。
採用微前端方法的原因是為了降低儀表板上的複雜性。我對這個挑戰感到很興奮,並且全心投入。
我使用 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中文網其他相關文章!