几个月前我正在开发一个前端项目。该项目是一个微前端，旨在集成到遗留仪表板上。
采用微前端方法的原因是为了降低仪表板上的复杂性。我对这个挑战感到很兴奋，并全身心投入其中。
我使用 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中文网其他相关文章！
