开发工具不是必需的

几个月前我正在开发一个前端项目。该项目是一个微前端，旨在集成到遗留仪表板上。

采用微前端方法的原因是为了降低仪表板上的复杂性。我对这个挑战感到很兴奋，并全身心投入其中。

我使用 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中文网其他相关文章！