Move client/index.js into DLL bundle so that it’s compiled once

build/webpack.js

@@ -142,7 +142,7 @@ export default async function getBaseWebpackConfig (dir: string, {dev = false, i
     'main.js': [],
     [CLIENT_STATIC_FILES_RUNTIME_MAIN]: [
       path.join(NEXT_PROJECT_ROOT_DIST, 'client', (dev ? `next-dev` : 'next'))
-    ].filter(Boolean)
+    ]
   } : {}
 
   const resolveConfig = {
@@ -226,6 +226,7 @@ export default async function getBaseWebpackConfig (dir: string, {dev = false, i
         context: dir,
         entry: {
           dll: [
+            path.join(NEXT_PROJECT_ROOT_DIST, 'client', 'index'),
             'react',
             'react-dom'
           ]

client/index.js

@@ -4,7 +4,6 @@ import HeadManager from './head-manager'
 import { createRouter } from '../lib/router'
 import EventEmitter from '../lib/EventEmitter'
 import { loadGetInitialProps, getURL } from '../lib/utils'
-import PageLoader from '../lib/page-loader'
 import * as asset from '../lib/asset'
 import * as envConfig from '../lib/runtime-config'
 import ErrorBoundary from './error-boundary'
@@ -26,7 +25,6 @@ const {
     page,
     pathname,
     query,
-    buildId,
     assetPrefix,
     runtimeConfig
   },
@@ -48,13 +46,6 @@ envConfig.setConfig({
 
 const asPath = getURL()
 
-const pageLoader = new PageLoader(buildId, prefix)
-window.__NEXT_LOADED_PAGES__.forEach(({ route, fn }) => {
-  pageLoader.registerPage(route, fn)
-})
-delete window.__NEXT_LOADED_PAGES__
-window.__NEXT_REGISTER_PAGE = pageLoader.registerPage.bind(pageLoader)
-
 const headManager = new HeadManager()
 const appContainer = document.getElementById('__next')
 
@@ -68,7 +59,8 @@ let App
 export const emitter = new EventEmitter()
 
 export default async ({
-  webpackHMR: passedWebpackHMR
+  webpackHMR: passedWebpackHMR,
+  pageLoader
 } = {}) => {
   // This makes sure this specific line is removed in production
   if (process.env.NODE_ENV === 'development') {

client/next-dev.js

@@ -1,24 +1,30 @@
 import initNext, * as next from './'
 import initOnDemandEntries from './on-demand-entries-client'
 import initWebpackHMR from './webpack-hot-middleware-client'
+import {initPageLoader} from './page-loader'
+
+const {
+  buildId,
+  assetPrefix
+} = window.__NEXT_DATA__
+const prefix = assetPrefix || ''
+
+// With dynamic assetPrefix it's no longer possible to set assetPrefix at the build time
+// So, this is how we do it in the client side at runtime
+__webpack_public_path__ = `${prefix}/_next/` //eslint-disable-line
 
 // Temporary workaround for the issue described here:
 // https://github.com/zeit/next.js/issues/3775#issuecomment-407438123
 // The runtimeChunk doesn't have dynamic import handling code when there hasn't been a dynamic import
 // The runtimeChunk can't hot reload itself currently to correct it when adding pages using on-demand-entries
 import('./noop')
 
-const {
-  __NEXT_DATA__: {
-    assetPrefix
-  }
-} = window
-
-const prefix = assetPrefix || ''
 const webpackHMR = initWebpackHMR({assetPrefix: prefix})
+const pageLoader = initPageLoader({buildId, assetPrefix: prefix})
 
 window.next = next
-initNext({ webpackHMR })
+
+initNext({ webpackHMR, pageLoader })
   .then((emitter) => {
     initOnDemandEntries({assetPrefix: prefix})
 

client/next.js

@@ -1,8 +1,15 @@
 import initNext, * as next from './'
+import {initPageLoader} from './page-loader'
+const {
+  buildId,
+  assetPrefix
+} = window.__NEXT_DATA__
 
 window.next = next
+const prefix = assetPrefix || ''
+const pageLoader = initPageLoader({buildId, prefix})
 
-initNext()
+initNext({pageLoader})
   .catch((err) => {
     console.error(`${err.message}\n${err.stack}`)
   })

client/page-loader.js

@@ -0,0 +1,11 @@
+import PageLoader from '../lib/page-loader'
+
+export function initPageLoader ({buildId, assetPrefix}) {
+  const pageLoader = new PageLoader(buildId, assetPrefix)
+  window.__NEXT_LOADED_PAGES__.forEach(({ route, fn }) => {
+    pageLoader.registerPage(route, fn)
+  })
+  delete window.__NEXT_LOADED_PAGES__
+  window.__NEXT_REGISTER_PAGE = pageLoader.registerPage.bind(pageLoader)
+  return pageLoader
+}