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

Question

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

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

在该文件中,似乎所有内容都放入main.JS文件和main.CSS文件等等.我使用"firebase deploy"(在我的情况下)推送这个.我希望我的代码可以被丑化,并且不会被任何开发人员完全读取.

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

Answer 1

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

Answer 2

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源代码生成,文件将不会在生产中结束,并且原始源代码将不会对任何人(包括您)可用.

Answer 3

这帮助了我：

"scripts": {
    "build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",   
  },

Answer 4

只需使用--nomaps参数构建它：

npm run build --nomaps

Answer 5

尝试这个：

\n\n

{\n  \xe2\x80\xa6\n  "scripts": {\n    "build": "set GENERATE_SOURCEMAP=false && react-scripts build"\n  }\n}\n

\n\n

它对我有用，并且在生产中不再显示该.map文件，但它仍然显示每个单独的文件以及我们编写的代码，以及 node_modules 文件夹。

\n\n

也许这是 Firebase 的事情，因为我们正在使用 Firebase 的免费版本或其他免费部署服务，例如 Now、Surge、Netlify 或其他服务？我也不确定。

\n