Move all NPM modules into a single chunk in dev mode. (vercel#1505)

arunoda · rauchg · commit a879f47f9aa1 · 2017-03-25T10:26:08.000-07:00
This will isolate all the NPM modules into a single chunk.
That chunk won't touch by webpack unless, there's a new NPM module.
That gives us much better re-build performance.
diff --git a/server/build/webpack.js b/server/build/webpack.js
@@ -93,15 +93,26 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
       name: 'commons',
       filename: 'commons.js',
       minChunks (module, count) {
-        // In the dev we use on-deman-entries.
-        // So, it makes no sense to use commonChunks with that.
-        if (dev) return false
+        // In the dev we use on-demand-entries.
+        // So, it makes no sense to use commonChunks based on the minChunks count.
+        // Instead, we move all the code in node_modules into this chunk.
+        // With that, we could gain better performance for page-rebuild process.
+        if (dev) {
+          return module.context && module.context.indexOf('node_modules') >= 0
+        }
 
         // NOTE: it depends on the fact that the entry funtion is always called
         // before applying CommonsChunkPlugin
         return count >= minChunks
       }
     }),
+    // This chunk contains all the webpack related code. So, all the changes
+    // related to that happens to this chunk.
+    // It won't touch commons.js and that gives us much better re-build perf.
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      filename: 'manifest.js'
+    }),
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': JSON.stringify(dev ? 'development' : 'production')
     }),
@@ -121,7 +132,7 @@ export default async function createCompiler (dir, { dev = false, quiet = false,
   } else {
     plugins.push(
       new CombineAssetsPlugin({
-        input: ['commons.js', 'main.js'],
+        input: ['manifest.js', 'commons.js', 'main.js'],
         output: 'app.js'
       }),
       new webpack.optimize.UglifyJsPlugin({
diff --git a/server/document.js b/server/document.js
@@ -78,6 +78,7 @@ export class NextScript extends Component {
     if (dev) {
       return (
         <div>
+          { this.getChunkScript('manifest.js') }
           { this.getChunkScript('commons.js') }
           { this.getChunkScript('main.js') }
         </div>
diff --git a/server/index.js b/server/index.js
@@ -90,6 +90,12 @@ export default class Server {
         await this.serveStatic(req, res, p)
       },
 
+      '/_next/:hash/manifest.js': async (req, res, params) => {
+        this.handleBuildHash('manifest.js', params.hash, res)
+        const p = join(this.dir, '.next/manifest.js')
+        await this.serveStatic(req, res, p)
+      },
+
       '/_next/:hash/main.js': async (req, res, params) => {
         this.handleBuildHash('main.js', params.hash, res)
         const p = join(this.dir, '.next/main.js')
