title: Dynamic Imports: Am I missing something?
body: <p>I have a React project that uses Webpack as a bundler, and I'm splitting my bundle into two chunks -- the main codebase <code>main.js</code>, and the vendor bundle <code>vendor.js</code>.</p>
  
  <p>After building these bundles, <code>main.js</code> ends up being 45kb and <code>vendor.js</code> is 651kb. </p>
  
  <p>One specific vendor library is 225kb and seems to be the worst offendor in the vendor imports.</p>
  
  <p>I am importing this library in a page component at the top of the file:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { ModuleA, ModuleB } from 'heavyPackage'; // 225kb import
  
  ...
  
  const Page = ({ setThing }) =&gt; {
  
  ...
  
  };
  </code></pre>
  
  <p>To try and have this heavy import loaded in a separate bundle, I tried to instead import these modules using a dynamic import.</p>
  
  <p>Inside the <code>Page</code> component, the modules weren't actually used until a particular function was called, so I tried to import the modules within that scope rather than at the top of the file:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  
  ...
  
  const Page = ({ setThing }) =&gt; {
  
    ...
  
    const handleSignIn = async () =&gt; {
      const scopedPackage = await import('heavyPackage');
      const { moduleA, moduleB } = scopedPackage;
  
      // use moduleA &amp; moduleB normally here
    };
  
  };
  </code></pre>
  
  <p>For some reason I figured Webpack would intelligently pick up on what I'm trying to do here and separate this heavy package into its own chunk that is downloaded only when needed, but the resulting bundles were the same -- a <code>main.js</code> that was 45kb and a <code>vendor.js</code> that was 651kb. Is my line of thinking here correct and possibly my Webpack configuration is off, or am I thinking of dynamic imports in the wrong way?</p>
  
  <p><strong>edit</strong> I have Webpack configured to split the bundle using <code>splitChunks</code>. Here is how I have this configured:</p>
  
  <pre class="lang-js prettyprint-override"><code>  optimization: {
      chunkIds: "named",
      splitChunks: {
        cacheGroups: {
          commons: {
            chunks: "initial",
            maxInitialRequests: 5,
            minChunks: 2,
            minSize: 0,
          },
          vendor: {
            chunks: "initial",
            enforce: true,
            name: "vendor",
            priority: 10,
            test: /node_modules/,
          },
        },
      },
    },
  </code></pre>