<p dir="auto">I found an example where webpack struggles to avoid dependency duplication. See below, where <code class="notranslate">c.js</code> is the entry point.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// c.js

function getMeAModule(moduleName) {
  if (moduleName === 'a') {
    require.ensure(['a'], function (require) {
      var a = require('a');
      a();
    });
  }
  if (moduleName === 'b') {
    require.ensure(['b'], function (require) {
      var b = require('b');
      b();
    });
  }
}

window.getMeAModule = getMeAModule;"><pre class="notranslate"><span class="pl-c">// c.js</span>

<span class="pl-k">function</span> <span class="pl-en">getMeAModule</span><span class="pl-kos">(</span><span class="pl-s1">moduleName</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">moduleName</span> <span class="pl-c1">===</span> <span class="pl-s">'a'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">ensure</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'a'</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-s1">require</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">var</span> <span class="pl-s1">a</span> <span class="pl-c1">=</span> <span class="pl-s1">require</span><span class="pl-kos">(</span><span class="pl-s">'a'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-s1">a</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-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">moduleName</span> <span class="pl-c1">===</span> <span class="pl-s">'b'</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">ensure</span><span class="pl-kos">(</span><span class="pl-kos">[</span><span class="pl-s">'b'</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-s1">require</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
      <span class="pl-k">var</span> <span class="pl-s1">b</span> <span class="pl-c1">=</span> <span class="pl-s1">require</span><span class="pl-kos">(</span><span class="pl-s">'b'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
      <span class="pl-s1">b</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>

<span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-c1">getMeAModule</span> <span class="pl-c1">=</span> <span class="pl-s1">getMeAModule</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// a.js

var d = require('d');

module.exports = function () {
  d();
  console.log('a');
};"><pre class="notranslate"><span class="pl-c">// a.js</span>

<span class="pl-k">var</span> <span class="pl-s1">d</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'d'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</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-s1">d</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'a'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// b.js

var d = require('d');

module.exports = function () {
  d();
  console.log('b');
};"><pre class="notranslate"><span class="pl-c">// b.js</span>

<span class="pl-k">var</span> <span class="pl-s1">d</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'d'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</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-s1">d</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'b'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// d.js

module.exports = function () {
  console.log('d');
};"><pre class="notranslate"><span class="pl-c">// d.js</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-en">exports</span> <span class="pl-c1">=</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-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'d'</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">If you build this example with webpack, three chunks will be created. The first will contain the entry point, <code class="notranslate">c.js</code>, as you would expect. The second "normal" chunk will contain <code class="notranslate">a.js</code> as well as <code class="notranslate">d.js</code>, and the third "normal" chunk will contain <code class="notranslate">b.js</code> and <code class="notranslate">d.js</code>.</p>
<p dir="auto">It seems to me that in the ideal situation, I could run <code class="notranslate">getMeAModule('a')</code> in the console, and then subsequently run <code class="notranslate">getMeAModule('b')</code> in the console but before webpack sends the async request for the chunk containing b, it checks (on the client) to see that b's dependency on d is already satisifed, and performs a smarter async request.</p>
<p dir="auto">I'm finding this to be quite problematic on a big project with a complicated dependency graph, large modules, and a dynamic require statement (which we currently work around with a long series of if-blocks, as in this example). Is webpack equipped to handle this situation? If so, how best can I do so?</p>
<p dir="auto">Thanks for your help! :)</p>
<p dir="auto">I'm having troubles with nested split points and common chunk plugin. This is the module layout in a minimal example.</p>
<h2 dir="auto">MODULES:</h2>
<p dir="auto"><code class="notranslate">a</code>,<code class="notranslate">b</code>,<code class="notranslate">c</code>,<code class="notranslate">d</code>,<code class="notranslate">e</code>: Leaf modules. You can see them as unrelated pieces of library code.</p>
<p dir="auto"><code class="notranslate">common</code>: Common module. It just contains the explicit requires of what i want to be in a common chunk. In this case <code class="notranslate">a</code>, <code class="notranslate">b</code> and <code class="notranslate">c</code>.</p>
<p dir="auto"><code class="notranslate">app</code>: It defines two split point for <code class="notranslate">subapp_1</code> and <code class="notranslate">subapp_2</code> via <code class="notranslate">require.ensure</code></p>
<p dir="auto"><code class="notranslate">index</code>: It defines two split point for loading <code class="notranslate">common</code> and <code class="notranslate">app</code> via <code class="notranslate">require.ensure</code></p>
<p dir="auto"><code class="notranslate">subapp_1</code>: requires <code class="notranslate">a</code> and <code class="notranslate">d</code></p>
<p dir="auto"><code class="notranslate">subapp_2</code>: requires <code class="notranslate">b</code>, <code class="notranslate">c</code> and <code class="notranslate">e</code></p>
<p dir="auto">I expect output of the build to have these chunks:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="- main chunk that calls the `require.ensure` for `common` and `app` chunks
- a `common` chunk with `a`, `b` and `c` code
- an `app` chunk that calls the `require.ensure` for `subapp_1` and `subapp2`
- a `subapp_1` chunk that has only the `d` code
- a `subapp_2` chunk that hase only the `e` code"><pre class="notranslate"><code class="notranslate">- main chunk that calls the `require.ensure` for `common` and `app` chunks
- a `common` chunk with `a`, `b` and `c` code
- an `app` chunk that calls the `require.ensure` for `subapp_1` and `subapp2`
- a `subapp_1` chunk that has only the `d` code
- a `subapp_2` chunk that hase only the `e` code
</code></pre></div>
<p dir="auto">What i obtain is the same result but looks like webpack is not able to understand that <code class="notranslate">subapp_1</code> and <code class="notranslate">subapp_2</code> only need the bits that are not in the common chunk.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="- main chunk that calls the `require.ensure` for `common` and `app` chunks
- a `common` chunk with `a`, `b` and `c` code
- an `app` chunk that calls the `require.ensure` for `subapp_1` and `subapp2`
- a `subapp_1` chunk that has `a` code and `d` code
- a `subapp_2` chunk that has `b`, `c` and `e` code"><pre class="notranslate"><code class="notranslate">- main chunk that calls the `require.ensure` for `common` and `app` chunks
- a `common` chunk with `a`, `b` and `c` code
- an `app` chunk that calls the `require.ensure` for `subapp_1` and `subapp2`
- a `subapp_1` chunk that has `a` code and `d` code
- a `subapp_2` chunk that has `b`, `c` and `e` code
</code></pre></div>
<p dir="auto">Am i missing something here?<br>
The test case is attached to the issue and you can run it just with:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="npm install
./node_modules/.bin/webpack"><pre class="notranslate"><code class="notranslate">npm install
./node_modules/.bin/webpack
</code></pre></div>
<p dir="auto">The resulting build is gonna be in:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="./build"><pre class="notranslate"><code class="notranslate">./build
</code></pre></div>
<p dir="auto">You can find the auto contained example here:</p>
<p dir="auto"><a href="https://www.dropbox.com/s/7oteeky864cb219/splitpoint_test.zip?dl=0" rel="nofollow">https://www.dropbox.com/s/7oteeky864cb219/splitpoint_test.zip?dl=0</a></p>