<h1 dir="auto">v7 Regression</h1>
<p dir="auto"><strong>Potential Commit/PR that introduced the regression</strong><br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="464162117" data-permission-text="Title is private" data-url="https://github.com/babel/babel/issues/10161" data-hovercard-type="pull_request" data-hovercard-url="/babel/babel/pull/10161/hovercard" href="https://github.com/babel/babel/pull/10161">#10161</a></p>
<p dir="auto"><strong>Description</strong><br>
When we recently upgraded from <code class="notranslate">7.5</code> to <code class="notranslate">7.8</code> we experienced a bundle size increase from <code class="notranslate">~3,4 MB</code> to <code class="notranslate">3.5 MB</code> minified (<code class="notranslate">+90 KB</code> difference)</p>
<p dir="auto">When we checked the bundle diff, we found that a function <code class="notranslate">_getRequireWildcardCache</code> is being re-defined for every module in our application and adds quite a bunch of code in total.</p>
<p dir="auto">Searching for the function, we found that it's a new feature in babel <code class="notranslate">7.6</code>. Here's a blog post where <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/ifsnow/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/ifsnow">@ifsnow</a> , who built this feature explains it nicely: <a href="https://www.notion.so/Improving-Babel-Import-performance-makes-React-Native-faster-4ab20915a599481ab8fbb4993db38709" rel="nofollow">https://www.notion.so/Improving-Babel-Import-performance-makes-React-Native-faster-4ab20915a599481ab8fbb4993db38709</a> (thanks for the explanation by the way)</p>
<p dir="auto">But what we find now is that besides the performance improvement we're hoping to get, we're seeing this regression in bundle size.</p>
<p dir="auto">Is that to be expected? Is it possible to opt-out of this optimization?</p>
<p dir="auto">Here's the input file.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="(function () {

  'use strict';

  const angular = window.angular;

  function mainContainer() {

    return {
      restrict: 'E',
      templateUrl: 'packages/main-container/main-container.html'
    };

  }

  angular.module('app')
    .directive('mainContainer', [
      mainContainer
    ]);

}());"><pre class="notranslate"><span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

  <span class="pl-s">'use strict'</span><span class="pl-kos">;</span>

  <span class="pl-k">const</span> <span class="pl-s1">angular</span> <span class="pl-c1">=</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">angular</span><span class="pl-kos">;</span>

  <span class="pl-k">function</span> <span class="pl-en">mainContainer</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-k">return</span> <span class="pl-kos">{</span>
      <span class="pl-c1">restrict</span>: <span class="pl-s">'E'</span><span class="pl-kos">,</span>
      <span class="pl-c1">templateUrl</span>: <span class="pl-s">'packages/main-container/main-container.html'</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-kos">}</span>

  <span class="pl-s1">angular</span><span class="pl-kos">.</span><span class="pl-en">module</span><span class="pl-kos">(</span><span class="pl-s">'app'</span><span class="pl-kos">)</span>
    <span class="pl-kos">.</span><span class="pl-en">directive</span><span class="pl-kos">(</span><span class="pl-s">'mainContainer'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span>
      <span class="pl-s1">mainContainer</span>
    <span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-kos">}</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">And here's the output.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="'use strict';

(function () {

  'use strict';

  var angular = window.angular;

  function mainContainer() {

    return {
      restrict: 'E',
      templateUrl: 'packages/main-container/main-container.html'
    };
  }

  angular.module('app').directive('mainContainer', [mainContainer]);
})();"><pre class="notranslate"><span class="pl-s">'use strict'</span><span class="pl-kos">;</span>

<span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

  <span class="pl-s">'use strict'</span><span class="pl-kos">;</span>

  <span class="pl-k">var</span> <span class="pl-s1">angular</span> <span class="pl-c1">=</span> <span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">angular</span><span class="pl-kos">;</span>

  <span class="pl-k">function</span> <span class="pl-en">mainContainer</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>

    <span class="pl-k">return</span> <span class="pl-kos">{</span>
      <span class="pl-c1">restrict</span>: <span class="pl-s">'E'</span><span class="pl-kos">,</span>
      <span class="pl-c1">templateUrl</span>: <span class="pl-s">'packages/main-container/main-container.html'</span>
    <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-s1">angular</span><span class="pl-kos">.</span><span class="pl-en">module</span><span class="pl-kos">(</span><span class="pl-s">'app'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">directive</span><span class="pl-kos">(</span><span class="pl-s">'mainContainer'</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">mainContainer</span><span class="pl-kos">]</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">I'm using the default settings.</p>