Fix Shared Sizes Missing Commons (#9752)

* Fix shared sizes missing commons

* Add tests

packages/next/build/index.ts

@@ -384,8 +384,9 @@ export default async function build(dir: string, conf = null): Promise<void> {
         bundleRelative
       )
 
-      let isStatic = false
       let isSsg = false
+      let isStatic = false
+      let isHybridAmp = false
       let ssgPageRoutes: string[] | null = null
 
       pagesManifest[page] = bundleRelative.replace(/\\/g, '/')
@@ -430,6 +431,7 @@ export default async function build(dir: string, conf = null): Promise<void> {
           )
 
           if (result.isHybridAmp) {
+            isHybridAmp = true
             hybridAmpPages.add(page)
           }
 
@@ -456,6 +458,7 @@ export default async function build(dir: string, conf = null): Promise<void> {
         serverBundle,
         static: isStatic,
         isSsg,
+        isHybridAmp,
         ssgPageRoutes,
       })
     })

packages/next/build/utils.ts

@@ -32,6 +32,7 @@ export function collectPages(
 
 export interface PageInfo {
   isAmp?: boolean
+  isHybridAmp?: boolean
   size: number
   static: boolean
   isSsg: boolean
@@ -135,7 +136,12 @@ export async function printTreeView(
     }
   })
 
-  const sharedData = await getSharedSizes(distPath, buildManifest, isModern)
+  const sharedData = await getSharedSizes(
+    distPath,
+    buildManifest,
+    isModern,
+    pageInfos
+  )
 
   messages.push(['+ shared by all', getPrettySize(sharedData.total)])
   Object.keys(sharedData.files)
@@ -255,15 +261,18 @@ let cachedBuildManifest: BuildManifestShape | undefined
 
 let lastCompute: ComputeManifestShape | undefined
 let lastComputeModern: boolean | undefined
+let lastComputePageInfo: boolean | undefined
 
 async function computeFromManifest(
   manifest: BuildManifestShape,
   distPath: string,
-  isModern: boolean
+  isModern: boolean,
+  pageInfos?: Map<string, PageInfo>
 ): Promise<ComputeManifestShape> {
   if (
     Object.is(cachedBuildManifest, manifest) &&
-    lastComputeModern === isModern
+    lastComputeModern === isModern &&
+    lastComputePageInfo === !!pageInfos
   ) {
     return lastCompute!
   }
@@ -275,6 +284,15 @@ async function computeFromManifest(
       return
     }
 
+    if (pageInfos) {
+      const cleanKey = key.replace(/\/index$/, '') || '/'
+      const pageInfo = pageInfos.get(cleanKey)
+      // don't include AMP pages since they don't rely on shared bundles
+      if (pageInfo?.isHybridAmp || pageInfo?.isAmp) {
+        return
+      }
+    }
+
     ++expected
     manifest.pages[key].forEach(file => {
       if (
@@ -321,6 +339,7 @@ async function computeFromManifest(
 
   cachedBuildManifest = manifest
   lastComputeModern = isModern
+  lastComputePageInfo = !!pageInfos
   return lastCompute!
 }
 
@@ -333,9 +352,15 @@ function difference<T>(main: T[], sub: T[]): T[] {
 export async function getSharedSizes(
   distPath: string,
   buildManifest: BuildManifestShape,
-  isModern: boolean
+  isModern: boolean,
+  pageInfos: Map<string, PageInfo>
 ): Promise<{ total: number; files: { [page: string]: number } }> {
-  const data = await computeFromManifest(buildManifest, distPath, isModern)
+  const data = await computeFromManifest(
+    buildManifest,
+    distPath,
+    isModern,
+    pageInfos
+  )
   return { total: data.sizeCommonFiles, files: data.sizeCommonFile }
 }
 

test/integration/build-output/fixtures/with-amp/pages/amp.js

+export const config = { amp: true }
+export default () => 'hi'

test/integration/build-output/fixtures/with-amp/pages/hybrid.js

+export const config = { amp: 'hybrid' }
+export default () => 'hi'

test/integration/build-output/fixtures/with-amp/pages/index.js

+export default function() {
+  return <div />
+}

test/integration/build-output/test/index.test.js

@@ -25,6 +25,7 @@ describe('Build Output', () => {
       expect(stdout).toMatch(/\/ [ ]* \d{1,} B/)
       expect(stdout).toMatch(/\+ shared by all [ 0-9.]* kB/)
       expect(stdout).toMatch(/ runtime\/main\.js [ 0-9.]* kB/)
+      expect(stdout).toMatch(/ chunks\/commons\.js [ 0-9. ]* kB/)
 
       expect(stdout).not.toContain('/_document')
       expect(stdout).not.toContain('/_app')
@@ -50,6 +51,7 @@ describe('Build Output', () => {
       expect(stdout).toMatch(/\/_app [ ]* \d{1,} B/)
       expect(stdout).toMatch(/\+ shared by all [ 0-9.]* kB/)
       expect(stdout).toMatch(/ runtime\/main\.js [ 0-9.]* kB/)
+      expect(stdout).toMatch(/ chunks\/commons\.js [ 0-9. ]* kB/)
 
       expect(stdout).not.toContain('/_document')
       expect(stdout).not.toContain('/_error')
@@ -59,6 +61,32 @@ describe('Build Output', () => {
     })
   })
 
+  describe('With AMP Output', () => {
+    const appDir = join(fixturesDir, 'with-amp')
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should not include custom error', async () => {
+      const { stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+
+      expect(stdout).toMatch(/\/ [ 0-9.]* kB/)
+      expect(stdout).toMatch(/\/amp .* AMP/)
+      expect(stdout).toMatch(/\/hybrid [ 0-9.]* B/)
+      expect(stdout).toMatch(/\+ shared by all [ 0-9.]* kB/)
+      expect(stdout).toMatch(/ runtime\/main\.js [ 0-9.]* kB/)
+      expect(stdout).toMatch(/ chunks\/commons\.js [ 0-9. ]* kB/)
+
+      expect(stdout).not.toContain('/_document')
+      expect(stdout).not.toContain('/_error')
+
+      expect(stdout).toContain('○ /')
+    })
+  })
+
   describe('Custom Error Output', () => {
     const appDir = join(fixturesDir, 'with-error')
 
@@ -75,6 +103,7 @@ describe('Build Output', () => {
       expect(stdout).toMatch(/λ \/_error [ ]* \d{1,} B/)
       expect(stdout).toMatch(/\+ shared by all [ 0-9.]* kB/)
       expect(stdout).toMatch(/ runtime\/main\.js [ 0-9.]* kB/)
+      expect(stdout).toMatch(/ chunks\/commons\.js [ 0-9. ]* kB/)
 
       expect(stdout).not.toContain('/_document')
       expect(stdout).not.toContain('/_app')