什么时候create-react-app会混淆或缩小代码?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (990)

我有一个关于webpack的基本问题,并且我可以使用帮助进行反应(围绕代码混淆/ uglification)。

我正在使用create-react-app我的应用程序,它似乎创建了一个捆绑的生产(生产后yarn build)。

在该文件中,似乎所有内容都放入main.JS文件和main.CSS文件等。我使用“firebase deploy”(在我的情况下)推送这个。我想让我的代码变得丑陋,并且不会被任何开发人员完全读取。

但是,当我在Chrome中查看我的应用时,它不显示main.JS或任何其他捆绑文件。它只显示每个单独的文件以及我编写的代码。知道为什么会这样吗?为什么不在chrome中的'sources'选项卡下显示uglified组合的main.js文件?这与源地图有关吗?

提问于
用户回答回答于

React在构建期间缩小代码并生成源映射。JS最终被认为是缩小产品的副产品,而不是因为保密。这样,最终用户能够比不缩小脚本更快地加载脚本,并且当您(或他们)打开开发人员工具时,您(以及其他所有人)可以浏览原始代码。

如果您build/static/js在构建后查看目录,则有成对.js.map文件。JS文件随您的网站一起加载,并且.map在打开Developer Tools时按需加载文件。

要禁用源代码生成,请在GENERATE_SOURCEMAP环境变量设置为的情况下运行构建false

GENERATE_SOURCEMAP=false npm run build

要么

GENERATE_SOURCEMAP=false yarn build

或者将其作为build脚本的一部分package.json

  {
    …
    "scripts": {
      …
-     "build": "react-scripts build"
+     "build": "GENERATE_SOURCEMAP=false react-scripts build"
    }
  }

如果省略.map源代码生成,文件将不会在生产中结束,并且原始源代码将不会供任何人(包括您)使用。

用户回答回答于

有一种更好的方法可以确保不包含源映射。在项目根文件夹中创建.env文件并添加GENERATE_SOURCEMAP=false。您将在没有源地图的情况下构建。

扫码关注云+社区

领取腾讯云代金券