add experimental.gzipSize flag which allows to switch to uncompressed…

… sizes (#25028)

Co-authored-by: Tim Neutkens <[email protected]>

packages/next/build/index.ts

@@ -79,6 +79,7 @@ import { trace, setGlobal } from '../telemetry/trace'
 import {
  collectPages,
  detectConflictingPaths,
+ computeFromManifest,
  getJsPageSizeInKb,
  getNamedExports,
  hasCustomGetInitialProps,
@@ -724,6 +725,11 @@ export default async function build(
  )
  }
 
+ const computedManifestData = await computeFromManifest(
+ buildManifest,
+ distDir,
+ config.experimental.gzipSize
+ )
  await Promise.all(
  pageKeys.map(async (page) => {
  const checkPageSpan = staticCheckSpan.traceChild('check-page', {
@@ -734,7 +740,9 @@ export default async function build(
  const [selfSize, allSize] = await getJsPageSizeInKb(
  actualPage,
  distDir,
- buildManifest
+ buildManifest,
+ config.experimental.gzipSize,
+ computedManifestData
  )
 
  let isSsg = false
@@ -1525,6 +1533,7 @@ export default async function build(
  useStatic404,
  pageExtensions: config.pageExtensions,
  buildManifest,
+ gzipSize: config.experimental.gzipSize,
  })
  )
 

packages/next/build/utils.ts

@@ -1,8 +1,9 @@
 import '../next-server/server/node-polyfill-fetch'
 import chalk from 'chalk'
-import gzipSize from 'next/dist/compiled/gzip-size'
+import getGzipSize from 'next/dist/compiled/gzip-size'
 import textTable from 'next/dist/compiled/text-table'
 import path from 'path'
+import { promises as fs } from 'fs'
 import { isValidElementType } from 'react-is'
 import stripAnsi from 'next/dist/compiled/strip-ansi'
 import {
@@ -32,11 +33,20 @@ import * as Log from './output/log'
 import { loadComponents } from '../next-server/server/load-components'
 import { trace } from '../telemetry/trace'
 
-const fileGzipStats: { [k: string]: Promise<number> } = {}
+const fileGzipStats: { [k: string]: Promise<number> | undefined } = {}
 const fsStatGzip = (file: string) => {
- if (fileGzipStats[file]) return fileGzipStats[file]
- fileGzipStats[file] = gzipSize.file(file)
- return fileGzipStats[file]
+ const cached = fileGzipStats[file]
+ if (cached) return cached
+ return (fileGzipStats[file] = getGzipSize.file(file))
+}
+
+const fileSize = async (file: string) => (await fs.stat(file)).size
+
+const fileStats: { [k: string]: Promise<number> | undefined } = {}
+const fsStat = (file: string) => {
+ const cached = fileStats[file]
+ if (cached) return cached
+ return (fileStats[file] = fileSize(file))
 }
 
 export function collectPages(
@@ -70,13 +80,15 @@ export async function printTreeView(
  pageExtensions,
  buildManifest,
  useStatic404,
+ gzipSize = true,
  }: {
  distPath: string
  buildId: string
  pagesDir: string
  pageExtensions: string[]
  buildManifest: BuildManifest
  useStatic404: boolean
+ gzipSize?: boolean
  }
 ) {
  const getPrettySize = (_size: number): string => {
@@ -96,7 +108,7 @@ export async function printTreeView(
  // Re-add `static/` for root files
  .replace(/^<buildId>/, 'static')
  // Remove file hash
- .replace(/[.-]([0-9a-z]{6})[0-9a-z]{14}(?=\.)/, '.$1')
+ .replace(/(?:^|[.-])([0-9a-z]{6})[0-9a-z]{14}(?=\.)/, '.$1')
 
  const messages: [string, string, string][] = [
  ['Page', 'Size', 'First Load JS'].map((entry) =>
@@ -115,7 +127,12 @@ export async function printTreeView(
  list = [...list, '/404']
  }
 
- const sizeData = await computeFromManifest(buildManifest, distPath, pageInfos)
+ const sizeData = await computeFromManifest(
+ buildManifest,
+ distPath,
+ gzipSize,
+ pageInfos
+ )
 
  const pageList = list
  .slice()
@@ -378,9 +395,10 @@ let cachedBuildManifest: BuildManifest | undefined
 let lastCompute: ComputeManifestShape | undefined
 let lastComputePageInfo: boolean | undefined
 
-async function computeFromManifest(
+export async function computeFromManifest(
  manifest: BuildManifest,
  distPath: string,
+ gzipSize: boolean = true,
  pageInfos?: Map<string, PageInfo>
 ): Promise<ComputeManifestShape> {
  if (
@@ -414,6 +432,8 @@ async function computeFromManifest(
  })
  })
 
+ const getSize = gzipSize ? fsStatGzip : fsStat
+
  const commonFiles = [...files.entries()]
  .filter(([, len]) => len === expected || len === Infinity)
  .map(([f]) => f)
@@ -426,7 +446,7 @@ async function computeFromManifest(
  stats = await Promise.all(
  commonFiles.map(
  async (f) =>
- [f, await fsStatGzip(path.join(distPath, f))] as [string, number]
+ [f, await getSize(path.join(distPath, f))] as [string, number]
  )
  )
  } catch (_) {
@@ -438,7 +458,7 @@ async function computeFromManifest(
  uniqueStats = await Promise.all(
  uniqueFiles.map(
  async (f) =>
- [f, await fsStatGzip(path.join(distPath, f))] as [string, number]
+ [f, await getSize(path.join(distPath, f))] as [string, number]
  )
  )
  } catch (_) {
@@ -486,9 +506,13 @@ function sum(a: number[]): number {
 export async function getJsPageSizeInKb(
  page: string,
  distPath: string,
- buildManifest: BuildManifest
+ buildManifest: BuildManifest,
+ gzipSize: boolean = true,
+ computedManifestData?: ComputeManifestShape
 ): Promise<[number, number]> {
- const data = await computeFromManifest(buildManifest, distPath)
+ const data =
+ computedManifestData ||
+ (await computeFromManifest(buildManifest, distPath, gzipSize))
 
  const fnFilterJs = (entry: string) => entry.endsWith('.js')
 
@@ -507,11 +531,13 @@ export async function getJsPageSizeInKb(
  data.commonFiles
  ).map(fnMapRealPath)
 
+ const getSize = gzipSize ? fsStatGzip : fsStat
+
  try {
  // Doesn't use `Promise.all`, as we'd double compute duplicate files. This
  // function is memoized, so the second one will instantly resolve.
- const allFilesSize = sum(await Promise.all(allFilesReal.map(fsStatGzip)))
- const selfFilesSize = sum(await Promise.all(selfFilesReal.map(fsStatGzip)))
+ const allFilesSize = sum(await Promise.all(allFilesReal.map(getSize)))
+ const selfFilesSize = sum(await Promise.all(selfFilesReal.map(getSize)))
 
  return [selfFilesSize, allFilesSize]
  } catch (_) {}

packages/next/next-server/server/config-shared.ts

@@ -62,6 +62,7 @@ export type NextConfig = { [key: string]: any } & {
  reactRoot: boolean
  enableBlurryPlaceholder: boolean
  disableOptimizedLoading: boolean
+ gzipSize: boolean
  }
 }
 
@@ -120,6 +121,7 @@ export const defaultConfig: NextConfig = {
  reactRoot: Number(process.env.NEXT_PRIVATE_REACT_ROOT) > 0,
  enableBlurryPlaceholder: false,
  disableOptimizedLoading: true,
+ gzipSize: true,
  },
  future: {
  strictPostcssConfiguration: false,

packages/next/next-server/server/config.ts

@@ -56,7 +56,11 @@ function assignDefaults(userConfig: { [key: string]: any }) {
  return currentConfig
  }
 
- if (key === 'experimental' && value && value !== defaultConfig[key]) {
+ if (
+ key === 'experimental' &&
+ value !== undefined &&
+ value !== defaultConfig[key]
+ ) {
  experimentalWarning()
  }