Issue 1:
I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

HTML pages generated by next export command should render initial view as quickly as possible.

Current Behavior

JS is loaded before everything else:

<!DOCTYPE html>
<html>
<head>
<meta charSet="utf-8" class="next-head"/>
<meta name="viewport" content="width=device-width, initial-scale=1" class="next-head"/>
<link rel="preload" href="/_next/[hash]/page/index.js" as="script"/>
<link rel="preload" href="/_next/[hash]/page/_error.js" as="script"/>
<link rel="preload" href="/_next/[hash]/app.js" as="script"/>
</head>

If those <link rel="preload"/> tags are removed, the JS still loads a bit sooner than I would prefer.

One solution is to replace these lines:

<script async="" id="__NEXT_PAGE__/" type="text/javascript" src="/_next/[hash]/page/index.js"></script>
<script async="" id="__NEXT_PAGE__/_error" type="text/javascript" src="/_next/[hash]/page/_error.js"></script>
<script type="text/javascript" src="/_next/[hash]/app.js" async=""></script>
</body>
</html>

With something like:

<script>
setTimeout(function(){
var insertScript = function (src, id) {
var scriptEl = document.createElement('script');
id && (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);
</script>
</body>
</html>

I've cobbled together a crude / brittle approach to making both of these modifications:

npm install --save-dev replace-in-file

Add the file in this gist to your project root.

Add something like the following to package.json:

"scripts": {
"export": "next export && node export_postprocess.js",
},

Your Environment

Tech
Version

next
4.3.0-canary.1

node
8.9.4

OS
OS X 10.13.2

Notes

The HTML snippet shown above after "One solution is to replace these lines" is as seen in next.js 4.3.0-canary.1. In 4.2.1 these lines are slightly different (line 3 empty div, line 5 closing div):

<script async="" id="__NEXT_PAGE__/" type="text/javascript" src="/_next/[hash]/page/index.js"></script>
<script async="" id="__NEXT_PAGE__/_error" type="text/javascript" src="/_next/[hash]/page/_error.js"></script>
<div></div>
<script type="text/javascript" src="/_next/[hash]/app.js" async=""></script>
</div>
</body>
</html>

The export_postprocess.js node script (see gist link above) takes this difference into account.

Next Steps

Should these changes be applied (in a cleaner way) to the export tool? As options or as defaults?

Would be interested in hearing how these changes affect the loading sequence for others.

Issue 2:
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:

In this case draft-js, redux-form among others are repeated in many pages across the app.

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.

[x ] I have searched the issues of this repository and believe that this is not a duplicate.

Your Environment

Tech
Version

next
4.1.4