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

【问题标题】：Is that suggested to delete .map files from the build generated by ReactJS?是否建议从 ReactJS 生成的构建中删除 .map 文件？
【发布时间】：2018-11-24 06:24:50
【问题描述】：

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

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

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

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

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

【问题讨论】：

源图更适合单独用于开发环境。在 prod 上关闭它是一个很好的举措。
@ValerianPereira 为什么？我挑战你给出一个非常有说服力的理由。

标签： reactjs production-environment

【解决方案1】：

Source Maps 有助于在浏览器中调试您的捆绑文件。它们在开发环境中很有帮助，但如果它们太重，通常最好不要将它们包含在生产环境中。

您可以在构建阶段本身禁用源映射生成。

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

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

到

const shouldUseSourceMap = false

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

注意：你应该已经弹出你的 create-react-app 来访问你的 webpack 配置文件

【讨论】：

感谢您的建议。通过构建后脚本作为替代解决方案运行是个好主意吗？
如果我不使用 webpack 怎么办？
即使您不使用webpack，源映射也是由您使用的任何构建工具生成的。通过构建后脚本删除源映射没有任何问题。但是，如果您可以一开始就阻止生成源映射，那么它将为您节省几秒钟的构建时间。
@KrupalPatel 如果此答案有助于解决您的问题，请将其标记为已接受。它将帮助其他遇到类似问题的人。
@DineshPandiyan 你还没有真正解释为什么。这个问题真正问的是为什么，而不是如何。

【解决方案2】：

如果你来到这里并使用 webpack，只需在配置中将 devtool 设置为 false 即可禁用 webpack（当前为 @5）生成 .map 文件。

module.exports = {
    devtool: false
}

除此之外，没有其他方法对我有用，即使设置 mode: "production" 也不起作用。

【讨论】：

【解决方案3】：

我发现在商业现实中，在任何环境中使用源地图比人们“担心成本”节省更多时间。

这就是它的归结。人们害怕它。

你到底在混淆什么？不良做法？不安全的代码？不提供源地图不会让你在那里。

如果您想节省性能？它们仅在打开开发工具时加载，此时...哦，看你没有源图真可惜，现在调试变得更加困难。

【讨论】：