Combine source maps (#3178)

* Propagate source maps through combine assets step

* Use constant development build id

* Move combine assets step before uglify step

This ensures that uglify will catch these changes.

* Move dynamic chunks step before uglify step

This ensures that uglify will catch these changes.

* Use chunk templates for page and dynamic chunks

This is a little more in line with how webpack generates its bootstrap and should have better compatibility with other plugins and source map generation.

* Register combined source map with chunks

This ensures that a sourcemap is fully generated.

* Do not minimize combined map inputs

Author: kpdecker

server/build/plugins/combine-assets-plugin.js

@@ -1,3 +1,5 @@
+import { ConcatSource } from 'webpack-sources'
+
 // This plugin combines a set of assets into a single asset
 // This should be only used with text assets,
 // otherwise the result is unpredictable.
@@ -8,23 +10,28 @@ export default class CombineAssetsPlugin {
   }
 
   apply (compiler) {
-    compiler.plugin('after-compile', (compilation, callback) => {
-      let newSource = ''
-      this.input.forEach((name) => {
-        const asset = compilation.assets[name]
-        if (!asset) return
+    compiler.plugin('compilation', (compilation) => {
+      compilation.plugin('additional-chunk-assets', (chunks) => {
+        const concat = new ConcatSource()
 
-        newSource += `${asset.source()}\n`
+        this.input.forEach((name) => {
+          const asset = compilation.assets[name]
+          if (!asset) return
 
-        // We keep existing assets since that helps when analyzing the bundle
-      })
+          concat.add(asset)
 
-      compilation.assets[this.output] = {
-        source: () => newSource,
-        size: () => newSource.length
-      }
+          // We keep existing assets since that helps when analyzing the bundle
+        })
 
-      callback()
+        compilation.additionalChunkAssets.push(this.output)
+        compilation.assets[this.output] = concat
+
+        // Register the combined file as an output of the associated chunks
+        chunks.filter((chunk) => {
+          return chunk.files.reduce((prev, file) => prev || this.input.includes(file), false)
+        })
+        .forEach((chunk) => chunk.files.push(this.output))
+      })
     })
   }
 }

server/build/plugins/dynamic-chunks-plugin.js

@@ -1,39 +1,48 @@
-export default class PagesPlugin {
+import { ConcatSource } from 'webpack-sources'
+
+const isImportChunk = /^chunks[/\\].*\.js$/
+const matchChunkName = /^chunks[/\\](.*)$/
+
+class DynamicChunkTemplatePlugin {
+  apply (chunkTemplate) {
+    chunkTemplate.plugin('render', function (modules, chunk) {
+      if (!isImportChunk.test(chunk.name)) {
+        return modules
+      }
+
+      const chunkName = matchChunkName.exec(chunk.name)[1]
+      const source = new ConcatSource()
+
+      source.add(`
+        __NEXT_REGISTER_CHUNK('${chunkName}', function() {
+      `)
+      source.add(modules)
+      source.add(`
+        })
+      `)
+
+      return source
+    })
+  }
+}
+
+export default class DynamicChunksPlugin {
   apply (compiler) {
-    const isImportChunk = /^chunks[/\\].*\.js$/
-    const matchChunkName = /^chunks[/\\](.*)$/
-
-    compiler.plugin('after-compile', (compilation, callback) => {
-      const chunks = Object
-        .keys(compilation.namedChunks)
-        .map(key => compilation.namedChunks[key])
-        .filter(chunk => isImportChunk.test(chunk.name))
-
-      chunks.forEach((chunk) => {
-        const asset = compilation.assets[chunk.name]
-        if (!asset) return
-
-        const chunkName = matchChunkName.exec(chunk.name)[1]
-
-        const content = asset.source()
-        const newContent = `
-          window.__NEXT_REGISTER_CHUNK('${chunkName}', function() {
-            ${content}
-          })
-        `
-        // Replace the exisiting chunk with the new content
-        compilation.assets[chunk.name] = {
-          source: () => newContent,
-          size: () => newContent.length
-        }
-
-        // This is to support, webpack dynamic import support with HMR
-        compilation.assets[`chunks/${chunk.id}`] = {
-          source: () => newContent,
-          size: () => newContent.length
-        }
+    compiler.plugin('compilation', (compilation) => {
+      compilation.chunkTemplate.apply(new DynamicChunkTemplatePlugin())
+
+      compilation.plugin('additional-chunk-assets', (chunks) => {
+        chunks = chunks.filter(chunk =>
+          isImportChunk.test(chunk.name) && compilation.assets[chunk.name]
+        )
+
+        chunks.forEach((chunk) => {
+          // This is to support, webpack dynamic import support with HMR
+          const copyFilename = `chunks/${chunk.name}`
+          compilation.additionalChunkAssets.push(copyFilename)
+          compilation.assets[copyFilename] = compilation.assets[chunk.name]
+        })
       })
-      callback()
     })
   }
 }

server/build/plugins/pages-plugin.js

@@ -1,47 +1,51 @@
+import { ConcatSource } from 'webpack-sources'
 import {
   IS_BUNDLED_PAGE,
   MATCH_ROUTE_NAME
 } from '../../utils'
 
-export default class PagesPlugin {
-  apply (compiler) {
-    compiler.plugin('after-compile', (compilation, callback) => {
-      const pages = Object
-        .keys(compilation.namedChunks)
-        .map(key => compilation.namedChunks[key])
-        .filter(chunk => IS_BUNDLED_PAGE.test(chunk.name))
+class PageChunkTemplatePlugin {
+  apply (chunkTemplate) {
+    chunkTemplate.plugin('render', function (modules, chunk) {
+      if (!IS_BUNDLED_PAGE.test(chunk.name)) {
+        return modules
+      }
 
-      pages.forEach((chunk) => {
-        const page = compilation.assets[chunk.name]
-        const pageName = MATCH_ROUTE_NAME.exec(chunk.name)[1]
-        let routeName = pageName
+      let routeName = MATCH_ROUTE_NAME.exec(chunk.name)[1]
 
         // We need to convert \ into / when we are in windows
         // to get the proper route name
         // Here we need to do windows check because it's possible
         // to have "\" in the filename in unix.
         // Anyway if someone did that, he'll be having issues here.
         // But that's something we cannot avoid.
-        if (/^win/.test(process.platform)) {
-          routeName = routeName.replace(/\\/g, '/')
-        }
-
-        routeName = `/${routeName.replace(/(^|\/)index$/, '')}`
-
-        const content = page.source()
-        const newContent = `
-          window.__NEXT_REGISTER_PAGE('${routeName}', function() {
-            var comp = ${content}
-            return { page: comp.default }
-          })
-        `
-        // Replace the exisiting chunk with the new content
-        compilation.assets[chunk.name] = {
-          source: () => newContent,
-          size: () => newContent.length
-        }
-      })
-      callback()
+      if (/^win/.test(process.platform)) {
+        routeName = routeName.replace(/\\/g, '/')
+      }
+
+      routeName = `/${routeName.replace(/(^|\/)index$/, '')}`
+
+      const source = new ConcatSource()
+
+      source.add(`
+        __NEXT_REGISTER_PAGE('${routeName}', function() {
+          var comp = 
+      `)
+      source.add(modules)
+      source.add(`
+          return { page: comp.default }
+        })
+      `)
+
+      return source
+    })
+  }
+}
+
+export default class PagesPlugin {
+  apply (compiler) {
+    compiler.plugin('compilation', (compilation) => {
+      compilation.chunkTemplate.apply(new PageChunkTemplatePlugin())
     })
   }
 }

server/build/webpack.js

@@ -149,6 +149,7 @@ export default async function createCompiler (dir, { buildId, dev = false, quiet
         output: 'app.js'
       }),
       new webpack.optimize.UglifyJsPlugin({
+        exclude: ['manifest.js', 'commons.js', 'main.js'],
         compress: { warnings: false },
         sourceMap: false
       })

server/index.js

@@ -408,7 +408,11 @@ export default class Server {
   }
 
   handleBuildId (buildId, res) {
-    if (this.dev) return true
+    if (this.dev) {
+      res.setHeader('Cache-Control', 'no-store, must-revalidate')
+      return true
+    }
+
     if (buildId !== this.renderOpts.buildId) {
       return false
     }
@@ -428,13 +432,17 @@ export default class Server {
   }
 
   handleBuildHash (filename, hash, res) {
-    if (this.dev) return
+    if (this.dev) {
+      res.setHeader('Cache-Control', 'no-store, must-revalidate')
+      return true
+    }
 
     if (hash !== this.buildStats[filename].hash) {
       throw new Error(`Invalid Build File Hash(${hash}) for chunk: ${filename}`)
     }
 
     res.setHeader('Cache-Control', 'max-age=365000000, immutable')
+    return true
   }
 
   send404 (res) {

server/render.js

@@ -96,11 +96,6 @@ async function doRender (req, res, pathname, query, {
   }
 
   const docProps = await loadGetInitialProps(Document, { ...ctx, renderPage })
-  // While developing, we should not cache any assets.
-  // So, we use a different buildId for each page load.
-  // With that we can ensure, we have unique URL for assets per every page load.
-  // So, it'll prevent issues like this: https://git.io/vHLtb
-  const devBuildId = Date.now()
 
   if (res.finished) return
 
@@ -110,7 +105,7 @@ async function doRender (req, res, pathname, query, {
       props,
       pathname,
       query,
-      buildId: dev ? devBuildId : buildId,
+      buildId,
       buildStats,
       assetPrefix,
       nextExport,