use dependOn to optimize chunks

disable vendor splitting for main and _app chunks
vercel · Apr 30, 2021 · 1aa3207 · 1aa3207
1 parent 67206a6
commit 1aa3207
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/packages/next/build/entries.ts b/packages/next/build/entries.ts
@@ -53,7 +53,15 @@ export function createPagesMapping(
 }
 
 export type WebpackEntrypoints = {
-  [bundle: string]: string | string[]
+  // for backward-compat
+  'main.js': string | string[]
+  [bundle: string]:
+    | string
+    | string[]
+    | {
+        import: string | string[]
+        dependOn: string | string[]
+      }
 }
 
 type Entrypoints = {

diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts
@@ -469,7 +469,9 @@ export default async function getBaseWebpackConfig(
       },
     },
     prodGranular: {
-      chunks: 'all',
+      // Keep main and _app chunks unsplitted in webpack 5
+      // as we don't need a separate vendor chunk from that.
+      chunks: (chunk) => !/^(main|pages\/_app)$/.test(chunk.name),
       cacheGroups: {
         framework: {
           chunks: 'all',
@@ -851,6 +853,7 @@ export default async function getBaseWebpackConfig(
       setImmediate: false,
     },
     // Kept as function to be backwards compatible
+    // @ts-ignore TODO webpack 5 typings needed
     entry: async () => {
       return {
         ...(clientEntries ? clientEntries : {}),
@@ -1601,9 +1604,12 @@ export default async function getBaseWebpackConfig(
   }
 
   // Backwards compat for `main.js` entry key
+  // and setup of dependencies between entries
+  // we can't do that in the initial entry for
+  // backward-compat reasons
   const originalEntry: any = webpackConfig.entry
   if (typeof originalEntry !== 'undefined') {
-    webpackConfig.entry = async () => {
+    const updatedEntry = async () => {
       const entry: WebpackEntrypoints =
         typeof originalEntry === 'function'
           ? await originalEntry()
@@ -1620,8 +1626,32 @@ export default async function getBaseWebpackConfig(
       }
       delete entry['main.js']
 
+      if (isWebpack5 && !isServer) {
+        for (const name of Object.keys(entry)) {
+          if (name === 'main') continue
+          const dependOn =
+            name.startsWith('pages/') && name !== 'pages/_app'
+              ? 'pages/_app'
+              : 'main'
+          const old = entry[name]
+          if (typeof old === 'object' && !Array.isArray(old)) {
+            entry[name] = {
+              dependOn,
+              ...old,
+            }
+          } else {
+            entry[name] = {
+              import: old,
+              dependOn,
+            }
+          }
+        }
+      }
+
       return entry
     }
+    // @ts-ignore webpack 5 typings needed
+    webpackConfig.entry = updatedEntry
   }
 
   if (!dev) {