<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">HTML pages generated by <code class="notranslate">next export</code> command should render initial view as quickly as possible.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">JS is loaded before everything else:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charSet=&quot;utf-8&quot; class=&quot;next-head&quot;/&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; class=&quot;next-head&quot;/&gt;
&lt;link rel=&quot;preload&quot; href=&quot;/_next/[hash]/page/index.js&quot; as=&quot;script&quot;/&gt;
&lt;link rel=&quot;preload&quot; href=&quot;/_next/[hash]/page/_error.js&quot; as=&quot;script&quot;/&gt;
&lt;link rel=&quot;preload&quot; href=&quot;/_next/[hash]/app.js&quot; as=&quot;script&quot;/&gt;
&lt;/head&gt;"><pre class="notranslate"><code class="notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charSet="utf-8" class="next-head"/&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1" class="next-head"/&gt;
&lt;link rel="preload" href="/_next/[hash]/page/index.js" as="script"/&gt;
&lt;link rel="preload" href="/_next/[hash]/page/_error.js" as="script"/&gt;
&lt;link rel="preload" href="/_next/[hash]/app.js" as="script"/&gt;
&lt;/head&gt;
</code></pre></div>
<p dir="auto">If those <code class="notranslate">&lt;link rel="preload"/&gt;</code> tags are removed, the JS still loads a bit sooner than I would prefer.</p>
<p dir="auto">One solution is to replace these lines:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;script async=&quot;&quot; id=&quot;__NEXT_PAGE__/&quot; type=&quot;text/javascript&quot; src=&quot;/_next/[hash]/page/index.js&quot;&gt;&lt;/script&gt;
&lt;script async=&quot;&quot; id=&quot;__NEXT_PAGE__/_error&quot; type=&quot;text/javascript&quot; src=&quot;/_next/[hash]/page/_error.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/_next/[hash]/app.js&quot; async=&quot;&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;script async="" id="__NEXT_PAGE__/" type="text/javascript" src="/_next/[hash]/page/index.js"&gt;&lt;/script&gt;
&lt;script async="" id="__NEXT_PAGE__/_error" type="text/javascript" src="/_next/[hash]/page/_error.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/_next/[hash]/app.js" async=""&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
<p dir="auto">With something like:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;script&gt;
setTimeout(function(){
var insertScript = function (src, id) {
  var scriptEl = document.createElement('script');
  id &amp;&amp; (scriptEl.id = id);
  scriptEl.src = src;
  document.body.appendChild(scriptEl);
}
  insertScript('/_next/[hash]/page/index.js', '__NEXT_PAGE__/');
  insertScript('/_next/[hash]/page/_error.js', '__NEXT_PAGE__/_error');
  insertScript('/_next/[hash]/app.js');
}, 0);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;script&gt;
setTimeout(function(){
var insertScript = function (src, id) {
  var scriptEl = document.createElement('script');
  id &amp;&amp; (scriptEl.id = id);
  scriptEl.src = src;
  document.body.appendChild(scriptEl);
}
  insertScript('/_next/[hash]/page/index.js', '__NEXT_PAGE__/');
  insertScript('/_next/[hash]/page/_error.js', '__NEXT_PAGE__/_error');
  insertScript('/_next/[hash]/app.js');
}, 0);
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
<p dir="auto">I've cobbled together a crude / brittle approach to making both of these modifications:</p>
<ol dir="auto">
<li>
<p dir="auto"><code class="notranslate">npm install --save-dev replace-in-file</code></p>
</li>
<li>
<p dir="auto">Add the file in <a href="https://gist.github.com/mrienstra/218c0836208af352951a663652a6d7c7">this gist</a> to your project root.</p>
</li>
<li>
<p dir="auto">Add something like the following to <code class="notranslate">package.json</code>:</p>
</li>
</ol>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &quot;scripts&quot;: {
    &quot;export&quot;: &quot;next export &amp;&amp; node export_postprocess.js&quot;,
  },"><pre class="notranslate"><code class="notranslate">  "scripts": {
    "export": "next export &amp;&amp; node export_postprocess.js",
  },
</code></pre></div>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.3.0-canary.1</td>
</tr>
<tr>
<td>node</td>
<td>8.9.4</td>
</tr>
<tr>
<td>OS</td>
<td>OS X 10.13.2</td>
</tr>
</tbody>
</table>
<h2 dir="auto">Notes</h2>
<p dir="auto">The HTML snippet shown above after "One solution is to replace these lines" is as seen in <code class="notranslate">next.js 4.3.0-canary.1</code>. In <code class="notranslate">4.2.1</code> these lines are slightly different (line 3 empty div, line 5 closing div):</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;script async=&quot;&quot; id=&quot;__NEXT_PAGE__/&quot; type=&quot;text/javascript&quot; src=&quot;/_next/[hash]/page/index.js&quot;&gt;&lt;/script&gt;
&lt;script async=&quot;&quot; id=&quot;__NEXT_PAGE__/_error&quot; type=&quot;text/javascript&quot; src=&quot;/_next/[hash]/page/_error.js&quot;&gt;&lt;/script&gt;
&lt;div&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;/_next/[hash]/app.js&quot; async=&quot;&quot;&gt;&lt;/script&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;script async="" id="__NEXT_PAGE__/" type="text/javascript" src="/_next/[hash]/page/index.js"&gt;&lt;/script&gt;
&lt;script async="" id="__NEXT_PAGE__/_error" type="text/javascript" src="/_next/[hash]/page/_error.js"&gt;&lt;/script&gt;
&lt;div&gt;&lt;/div&gt;
&lt;script type="text/javascript" src="/_next/[hash]/app.js" async=""&gt;&lt;/script&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
<p dir="auto">The <code class="notranslate">export_postprocess.js</code> node script (see gist link above) takes this difference into account.</p>
<h2 dir="auto">Next Steps</h2>
<p dir="auto">Should these changes be applied (in a cleaner way) to the <code class="notranslate">export</code> tool? As options or as defaults?</p>
<p dir="auto">Would be interested in hearing how these changes affect the loading sequence for others.</p>
<p dir="auto">We are building an app with several dependencies being used in several pages, the thing is when building the application for production, some dependencies are being used in several of the chunks generated, here you can see how it looks:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/996671/33784872-873b1dc0-dc30-11e7-94c9-b0e1ffeda64d.png"><img width="1280" alt="screen shot 2017-12-08 at 3 49 34 pm" src="https://user-images.githubusercontent.com/996671/33784872-873b1dc0-dc30-11e7-94c9-b0e1ffeda64d.png" style="max-width: 100%;"></a></p>
<p dir="auto">In this case draft-js, redux-form among others are repeated in many pages across the app.</p>
<p dir="auto">I wanted to know if it is possible to configure webpack to extract the repeated dependencies into a separated normal chunk to decrease the size of the pages.</p>

<ul dir="auto">
<li>[x ] I have searched the <a href="https://github.com/zeit/next.js/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>4.1.4</td>
</tr>
</tbody>
</table>