🗜 Optimize client-side routing manifest (#8429)

* Optimize client-side routing manifest

* Turn on granularChunks for tests

* Add row for build manifest

* Hack it

packages/next/build/webpack/plugins/build-manifest-plugin.ts

-import { Compiler } from 'webpack'
-import { RawSource } from 'webpack-sources'
+import devalue from 'devalue'
 import {
   BUILD_MANIFEST,
-  ROUTE_NAME_REGEX,
-  IS_BUNDLED_PAGE_REGEX,
   CLIENT_STATIC_FILES_PATH,
   CLIENT_STATIC_FILES_RUNTIME_MAIN,
+  IS_BUNDLED_PAGE_REGEX,
+  ROUTE_NAME_REGEX,
 } from 'next-server/constants'
+import { Compiler } from 'webpack'
+import { RawSource } from 'webpack-sources'
 
 interface AssetMap {
   devFiles: string[]
@@ -37,7 +38,7 @@ const generateClientManifest = (
       clientManifest[page] = filteredDeps
     }
   })
-  return JSON.stringify(clientManifest)
+  return devalue(clientManifest)
 }
 
 // This plugin creates a build-manifest.json for all assets that are being output
@@ -159,11 +160,10 @@ export default class BuildManifestPlugin {
           }/_buildManifest.js`
 
           compilation.assets[clientManifestPath] = new RawSource(
-            `self.__BUILD_MANIFEST = JSON.parse('${generateClientManifest(
+            `self.__BUILD_MANIFEST = ${generateClientManifest(
               assetMap,
               false
-            )}')
-            self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()`
+            )};` + `self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()`
           )
 
           if (this.modern) {
@@ -172,11 +172,10 @@ export default class BuildManifestPlugin {
             }/_buildManifest.module.js`
 
             compilation.assets[modernClientManifestPath] = new RawSource(
-              `self.__BUILD_MANIFEST = JSON.parse('${generateClientManifest(
+              `self.__BUILD_MANIFEST = ${generateClientManifest(
                 assetMap,
                 true
-              )}')
-              self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()`
+              )};` + `self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()`
             )
           }
         }

packages/next/package.json

@@ -76,6 +76,7 @@
     "babel-plugin-transform-define": "1.3.1",
     "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "chalk": "2.4.2",
+    "devalue": "2.0.0",
     "find-up": "4.0.0",
     "fork-ts-checker-webpack-plugin": "1.3.4",
     "fresh": "0.5.2",

test/.stats-app/stats-config.js

@@ -20,6 +20,10 @@ const clientGlobs = [
   {
     name: 'Client Pages Modern',
     globs: ['.next/static/*/pages/**/*.module.js']
+  },
+  {
+    name: 'Client Build Manifests',
+    globs: ['.next/static/*/_buildManifest*']
   }
 ]
 
@@ -52,6 +56,15 @@ const renames = [
   {
     srcGlob: '.next/static/chunks/commons*.module.js',
     dest: '.next/static/chunks/commons.HASH.module.js'
+  },
+  // misc
+  {
+    srcGlob: '.next/static/*/_buildManifest.js',
+    dest: '.next/static/BUILD_ID/_buildManifest.js'
+  },
+  {
+    srcGlob: '.next/static/*/_buildManifest.module.js',
+    dest: '.next/static/BUILD_ID/_buildManifest.module.js'
   }
 ]
 
@@ -78,7 +91,8 @@ module.exports = {
                 return config
               },
               experimental: {
-                modern: true
+                modern: true,
+                granularChunks: true
               }
             }
           `
@@ -92,7 +106,8 @@ module.exports = {
           content: `
             module.exports = {
               experimental: {
-                modern: true
+                modern: true,
+                granularChunks: true
               }
             }
           `
@@ -116,7 +131,8 @@ module.exports = {
             module.exports = {
               target: 'serverless',
               experimental: {
-                modern: true
+                modern: true,
+                granularChunks: true
               }
             }
           `

yarn.lock

@@ -5136,6 +5136,11 @@ detect-newline@^2.1.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
+devalue@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/devalue/-/devalue-2.0.0.tgz#2afa0b7c1bb35bebbef792498150663fdcd33c68"
+  integrity sha512-6H2FBD5DPnQS75UWJtQjoVeKZlmXoa765UgYS5RQnx6Ay9LUhUld0w1/D6cYdrY+wnu6XQNlpEBfnJUZK0YyPQ==
+
 dezalgo@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456"