Compute Gzip Sizes of Files (#9745)

packages/next/build/utils.ts

@@ -1,10 +1,9 @@
 import chalk from 'chalk'
-import fs from 'fs'
+import gzipSize from 'gzip-size'
 import textTable from 'next/dist/compiled/text-table'
 import path from 'path'
 import { isValidElementType } from 'react-is'
 import stripAnsi from 'strip-ansi'
-import { promisify } from 'util'
 import { Redirect, Rewrite } from '../lib/check-custom-routes'
 import { SPR_GET_INITIAL_PROPS_CONFLICT } from '../lib/constants'
 import prettyBytes from '../lib/pretty-bytes'
@@ -14,14 +13,11 @@ import { getRouteMatcher, getRouteRegex } from '../next-server/lib/router/utils'
 import { isDynamicRoute } from '../next-server/lib/router/utils/is-dynamic'
 import { findPageFile } from '../server/lib/find-page-file'
 
-const fsStatPromise = promisify(fs.stat)
-const fileStats: { [k: string]: Promise<fs.Stats> } = {}
-const fsStat = (file: string) => {
-  if (fileStats[file]) return fileStats[file]
-
-  fileStats[file] = fsStatPromise(file)
-
-  return fileStats[file]
+const fileGzipStats: { [k: string]: Promise<number> } = {}
+const fsStatGzip = (file: string) => {
+  if (fileGzipStats[file]) return fileGzipStats[file]
+  fileGzipStats[file] = gzipSize.file(file)
+  return fileGzipStats[file]
 }
 
 export function collectPages(
@@ -63,11 +59,11 @@ export async function printTreeView(
 ) {
   const getPrettySize = (_size: number): string => {
     const size = prettyBytes(_size)
-    // green for 0-100kb
-    if (_size < 100 * 1000) return chalk.green(size)
-    // yellow for 100-250kb
-    if (_size < 250 * 1000) return chalk.yellow(size)
-    // red for >= 250kb
+    // green for 0-130kb
+    if (_size < 130 * 1000) return chalk.green(size)
+    // yellow for 130-170kb
+    if (_size < 170 * 1000) return chalk.yellow(size)
+    // red for >= 170kb
     return chalk.red.bold(size)
   }
 
@@ -302,12 +298,12 @@ async function computeFromManifest(
     .filter(([, len]) => len === expected)
     .map(([f]) => f)
 
-  let stats: [string, fs.Stats][]
+  let stats: [string, number][]
   try {
     stats = await Promise.all(
       commonFiles.map(
         async f =>
-          [f, await fsStat(path.join(distPath, f))] as [string, fs.Stats]
+          [f, await fsStatGzip(path.join(distPath, f))] as [string, number]
       )
     )
   } catch (_) {
@@ -317,10 +313,10 @@ async function computeFromManifest(
   lastCompute = {
     commonFiles,
     sizeCommonFile: stats.reduce(
-      (obj, n) => Object.assign(obj, { [n[0]]: n[1].size }),
+      (obj, n) => Object.assign(obj, { [n[0]]: n[1] }),
       {}
     ),
-    sizeCommonFiles: stats.reduce((size, [, stat]) => size + stat.size, 0),
+    sizeCommonFiles: stats.reduce((size, [, stat]) => size + stat, 0),
   }
 
   cachedBuildManifest = manifest
@@ -366,8 +362,8 @@ export async function getPageSizeInKb(
   deps.push(clientBundle)
 
   try {
-    let depStats = await Promise.all(deps.map(fsStat))
-    return depStats.reduce((size, stat) => size + stat.size, 0)
+    let depStats = await Promise.all(deps.map(fsStatGzip))
+    return depStats.reduce((size, stat) => size + stat, 0)
   } catch (_) {}
   return -1
 }

packages/next/package.json

@@ -95,6 +95,7 @@
     "find-up": "4.0.0",
     "fork-ts-checker-webpack-plugin": "3.1.1",
     "fresh": "0.5.2",
+    "gzip-size": "5.1.1",
     "ignore-loader": "0.1.2",
     "is-docker": "2.0.0",
     "is-wsl": "2.1.1",

yarn.lock

@@ -4172,7 +4172,7 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-browserslist@^4.0.0, browserslist@^4.3.6, browserslist@^4.6.0, browserslist@^4.6.3, browserslist@^4.6.4, browserslist@^4.7.1, browserslist@^4.7.3:
+browserslist@^4.0.0, browserslist@^4.3.6, browserslist@^4.6.0, browserslist@^4.6.3, browserslist@^4.6.4, browserslist@^4.7.3:
   version "4.8.2"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.2.tgz#b45720ad5fbc8713b7253c20766f701c9a694289"
   integrity sha512-+M4oeaTplPm/f1pXDw84YohEv7B1i/2Aisei8s4s6k3QsoSHa7i5sz8u/cGQkkatCPxMASKxPualR4wwYgVboA==
@@ -4436,7 +4436,7 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000980, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001002, caniuse-lite@^1.0.30001010, caniuse-lite@^1.0.30001015:
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000980, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001010, caniuse-lite@^1.0.30001015:
   version "1.0.30001015"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001015.tgz#15a7ddf66aba786a71d99626bc8f2b91c6f0f5f0"
   integrity sha512-/xL2AbW/XWHNu1gnIrO8UitBGoFthcsDgU9VLK1/dpsoxbaD5LscHozKze05R6WLsBvLhqv78dAPozMFQBYLbQ==
@@ -7707,7 +7707,7 @@ gulp-mocha@^6.0.0:
     supports-color "^5.4.0"
     through2 "^2.0.3"
 
-gzip-size@^5.0.0:
+gzip-size@5.1.1, gzip-size@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
   integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==