<p dir="auto">Hi guys,</p>
<p dir="auto">This might be related to chrome rather than webpack, but I'm not really sure about that.</p>
<p dir="auto">I have a problem related to js files getting partially duplicated by the browser.</p>
<p dir="auto">The following part of the minified js can visually seen duplicated:</p>
<ul dir="auto">
<li>Checks if an event is supported in the current execution environment.<br>
*
<ul dir="auto">
<li>NOTE: This will not work correctly for non-generic events such as <code class="notranslate">change</code>,</li>
</ul>
</li>
</ul>
<p dir="auto">This happens when chrome is loading the js but I quickly navigate to another link in the website.<br>
When I come back, and the files start to load again, then the file gets this duplication problem, this causes a js error that can be seen on console.</p>
<p dir="auto">commonChunk.54cef61….bundle.js:41 Uncaught SyntaxError: Unexpected token !</p>
<p dir="auto">The worst problem is that I'm caching files, so the user doesn't get rid of the error until he clears the cache.</p>
<p dir="auto">If I wait for the file to load, then the file gets received perfectly by the user.</p>
<p dir="auto">This seems only to be affecting commonChunk.</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">The <code class="notranslate">splitChunks</code> feature (using <code class="notranslate">chunks: 'all'</code>) doesn't take into account CSS extraction (via <code class="notranslate">mini-css-extract-plugin</code>) when deciding whether to create a new inital chunk. A new chunk can end up being created that is empty (other than the webpack functions) and under the default 30KB <code class="notranslate">splitChunks.minSize</code> threshold so shouldn't have been created.</p>
<p dir="auto">eg:<br>
<a href="https://github.com/edmorley/testcase-webpack-splitchunks-css/blob/master/dist/vendors%7EpageA%7EpageB.js"><code class="notranslate">dist/vendors~pageA~pageB.js</code></a></p>
<p dir="auto">For webpack build log output see:<br>
<a href="https://github.com/edmorley/testcase-webpack-splitchunks-css#actual">https://github.com/edmorley/testcase-webpack-splitchunks-css#actual</a></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>
<ol dir="auto">
<li><code class="notranslate">git clone https://github.com/edmorley/testcase-webpack-splitchunks-css.git</code></li>
<li><code class="notranslate">yarn install</code></li>
<li><code class="notranslate">yarn build</code></li>
</ol>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">There is no <code class="notranslate">dist/vendors~pageA~pageB.js</code> chunk generated, since after the CSS is extracted, there should be no common JS code between the two pages.</p>
<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  4.8.3<br>
Node.js version: 10.1.0<br>
Operating System: Windows 10<br>
Additional tools: mini-css-extract-plugin@0.4.0</p>