是否建议从 ReactJS 生成的构建中删除 .map 文件？

Question

我正在 ReactJS 中开发大型应用程序，并担心巨大的构建大小问题。

在 ReactJS 中生成构建（生产模式）后，我发现构建大小太大，经过研究，我发现您可以通过在package.json文件中进行以下配置来删除源映射文件（.map） 。

 "postbuild": "rimraf build/**/*.map",

因此，我的构建尺寸减少了 80%，这让我非常高兴。

但是，我仍然有一个疑问，上述是不是最好的解决方案？

Answer 1

什么是源映射？

源映射通过从捆绑代码重建原始源代码来帮助在浏览器中调试捆绑文件。

我应该在生产中使用源映射吗？

源映射不会减慢页面加载速度，因此将它们包含在生产环境中不是问题。仅当您在浏览器中打开 devtools 时才会下载它们。然而，由于源映射使浏览器能够从捆绑的代码中重建原始源代码，任何拥有开发工具的人都可以轻松地达到源代码的峰值（没有源映射不是不可能，只是不容易）。这就是为什么常见的做法是仅在开发环境中包含源映射。

如何禁用源映射？

您可以在构建期间禁用源映射生成。

如果您使用的是最新版本create-react-app，请webppack.config.prod更改此行

const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

到

const shouldUseSourceMap = false

并且您的产品构建文件将不包含源映射。

注意：您应该弹出 create-react-app 才能访问您的 webpack 配置文件