title: How to tree shake ES6 index files using webpack?
body: <p>I have a file <code>./icons.ts</code>, which exports:</p>
  <pre><code>export { GmailIcon } from './Gmail'
  export { H1Icon } from './H1'
  export { H2Icon } from './H2'
  export { H3Icon } from './H3'
  // and many more
  </code></pre>
  <p>Then I have a dynamically loaded route which loads one of these icons as such:</p>
  <pre><code>import { GmailIcon } from './icons';
  
  // ...
  </code></pre>
  <p>Finally, <a href="/questions/tagged/webpack" class="post-tag" title="show questions tagged &#39;webpack&#39;" rel="tag">webpack</a> code splitting is configured such that each icon is in its own chunk.</p>
  <p>However, when analyzing unused code using Lighthouse, I've learned that at the moment webpack is pulling <em>all</em> icon containing bundles when I load the dynamic route.</p>
  <p>Is my expectation wrong that webpack should be able to understand that <code>import { GmailIcon } from './icons'</code> is only supposed to load the bundle containing <code>GmailIcon</code> or did I somehow misconfigure webpack?</p>