<p dir="auto">Why was the dedup plugin deprecated? Without it my build is several kb larger.</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Feature! <g-emoji class="g-emoji" alias="tada" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f389.png">🎉</g-emoji></p>


<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">(This is gonna be a bit longer.)</p>
<p dir="auto">Let’s imagine working on a project using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API" rel="nofollow">WebWorkers</a>. Let’s say I am using this great new shiny library <a href="https://github.com/GoogleChromeLabs/comlink">Comlink</a>. It’s needed by both <code class="notranslate">main.js</code> and <code class="notranslate">worker.js</code> as Comlink is an abstraction over <code class="notranslate">postMessage</code>. Of course both <code class="notranslate">main.js</code> and <code class="notranslate">worker.js</code> have other dependencies besides Comlink.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/234957/36124715-048b2918-1049-11e8-8f4f-815b3a5e4148.png"><img src="https://user-images.githubusercontent.com/234957/36124715-048b2918-1049-11e8-8f4f-815b3a5e4148.png" alt="dependencies" style="max-width: 100%;"></a></p>
<p dir="auto">(You might already be able to tell where I’m going with this)</p>
<p dir="auto"><strong>Attempt 1: Entry points</strong></p>
<p dir="auto">Listing both <code class="notranslate">worker.js</code> and <code class="notranslate">main.js</code> as entry points doesn’t yield the expected results as all static imports will be inlined. Comlink will be (down)loaded twice. The semantics of entry points are that only one entry point will be loaded at a time. In the context of my example, though, two entry points are loaded in parallel.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/234957/36125110-a067fa04-104a-11e8-9f56-704ca86b76d8.png"><img src="https://user-images.githubusercontent.com/234957/36125110-a067fa04-104a-11e8-9f56-704ca86b76d8.png" alt="suboptimalchunk" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Attempt 2: Dynamic loading</strong></p>
<p dir="auto">I tried some hackery with <code class="notranslate">import()</code>, but the problem is that WebPack (rightly) assumes that there’s is a global registry of loaded modules. <code class="notranslate">worker.js</code>, however, runs in a different realm and has a separate global scope to <code class="notranslate">main.js</code></p>
<p dir="auto"><strong>Workaround: Force a common chunk</strong></p>
<p dir="auto">My current workaround is to use the entry point approach and manually maintain a list of shared modules that need to be put in a separate chunk using <code class="notranslate">CommonChunksPlugin</code>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="module.exports = {
  entry: {
    main: './src/main.js',
    worker: './src/worker.js',
  },
  output: {
    filename: '[name].js',
  },
  plugins: [
    // Force comlink into its own bundle
    new webpack.optimize.CommonsChunkPlugin({
      name: 'comlink',
      minChunks: 2,
    }),
  ],
};"><pre class="notranslate"><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">entry</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">main</span>: <span class="pl-s">'./src/main.js'</span><span class="pl-kos">,</span>
    <span class="pl-c1">worker</span>: <span class="pl-s">'./src/worker.js'</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">filename</span>: <span class="pl-s">'[name].js'</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-c">// Force comlink into its own bundle</span>
    <span class="pl-k">new</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">optimize</span><span class="pl-kos">.</span><span class="pl-c1">CommonsChunkPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">'comlink'</span><span class="pl-kos">,</span>
      <span class="pl-c1">minChunks</span>: <span class="pl-c1">2</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"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>



<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">Under the assumption that there’s good caching headers, the optimal behavior is to put Comlink in it’s own chunk (or a chunk for shared modules) so it’s only downloaded once. The second request by the worker will hit the HTTP cache and re-use the already downloaded shared chunk.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/234957/36125059-67bd99d4-104a-11e8-8e92-a2005b23a26a.png"><img src="https://user-images.githubusercontent.com/234957/36125059-67bd99d4-104a-11e8-8e92-a2005b23a26a.png" alt="optimalchunk" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>API</strong></p>
<p dir="auto">I’m not sure what the API for this would look like. This API would not only be useful for workers, but also for pages that load another entry point in an iframe (although, tbh, I struggle to find a good example for this <g-emoji class="g-emoji" alias="man_shrugging" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f937-2642.png">🤷‍♂️</g-emoji> )</p>
<p dir="auto">I think the most straight-forward way would to add a <code class="notranslate">realmEndpoints</code> (name pending lol) to the webpack config which lists entry points that can be loaded in parallel to <em>one</em> of the main entry points.</p>
<p dir="auto">What do y’all think? API suggestions/corrections? Am I just holding it wrong?</p>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>