reactjs - 如何告诉 react-create-app 构建脚本不要最小化文件的某些部分？

Question

TL;DR:我如何告诉 React 构建脚本保留部分代码不变？

我用“create-react-app”制作了一个应用程序。我正在使用标准的“npm run build”命令来构建我的产品。

在 index.html 文件中，我包含了一个 Google 跟踪代码管理器和 Google 优化代码段。

在构建时，脚本会以一种阻止它们工作的方式缩小它们。

所以现在，每次我“构建”时，我都必须手动用原始片段覆盖缩小的部分。那是——当然—— super 不方便。

我如何告诉构建脚本不理会这些部分？我没有成功浏览文档...

感谢您的帮助!

正常(未压缩)代码:

  <!-- Google Optimize async hide -->
  <style>.async-hide { opacity: 0 !important} </style>
  <script>
  (function(a,s,y,n,c,h,i,d,e){
   s.className+=' '+y;
   h.end=i=function(){
     s.className=s.className.replace(RegExp(' ?'+y),'')};
     (a[n]=a[n]||[]).hide=h;setTimeout(function(){
       i();h.end=null
     },c);
  })
  (window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-ABCDEF12':true});
  </script>


  <!-- Google Tag Manager -->
  <script>
  (function(w,d,s,l,i){
    w[l]=w[l]||[];w[l].push({
      'gtm.start': new Date().getTime(),
      event:'gtm.js'});
    var 
     f=d.getElementsByTagName(s)[0],
     j=d.createElement(s),
     dl=l!='dataLayer'?'&l='+l:'';
     j.async=true;
     j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
     f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-ABCDEF12');</script>
  <!-- End Google Tag Manager -->

压缩代码:

  <style>.async-hide{opacity:0!important}</style>
  <script>!function(e,n,a,c,t,d,s,i,l){
     n.className+=" "+a,d.end=s=function(){
       n.className=n.className.replace(RegExp(" ?"+a),"")
     },
     (e[c]=e[c]||[]).hide=d,setTimeout(function(){
       s(),d.end=null
     },4e3)
   }(window,document.documentElement,"async-hide","dataLayer",0,{"GTM-ABCDEF12":!0})
    </script>
    <script>
    !function(e,t,a,n,g){
      e[n]=e[n]||[],e[n].push({
        "gtm.start":(new Date).getTime(),
        event:"gtm.js"
      });
      var m=t.getElementsByTagName(a)[0],
        r=t.createElement(a);
      r.async=!0,
      r.src="https://www.googletagmanager.com/gtm.js?id=GTM-ABCDEF12",
      m.parentNode.insertBefore(r,m)
      }(window,document,"script","dataLayer")
    </script>

Answer 1

至少有 1 个主要用例不需要缩小代码片段，即代码使用反射时。例如，假设您从 Ajax 调用中收到如下结构:

{
 "type": "SomeConcreteType",
 "fieldA": "Some value"
}

您的业务逻辑可能需要您创建 SomeConcreteType 的实例。在非缩小的世界中，您只需编写:

var obj = new window[type]();

但在缩小的世界中你不能，因为 SomeConcreteType 名称已被删除。

相反，当向服务器发送实例时，您不能再依赖 obj.constructor.name。

这会导致非常丑陋的代码，您可以在其中打开硬编码字符串。

为此而不得不弹出听起来不太对。

不确定为什么 CRA 脚本无法加载某些配置文件以覆盖默认值...