Redesigned page output (#7324)

* Redesigned page output

* Remove old commented out code

* right align files

packages/next/build/index.ts

@@ -19,9 +19,10 @@ import {
   collectPages,
   getCacheIdentifier,
   getFileForPage,
-  getPageInfo,
+  getPageSizeInKb,
   getSpecifiedPages,
   printTreeView,
+  PageInfo,
 } from './utils'
 import getBaseWebpackConfig from './webpack-config'
 import {
@@ -238,43 +239,28 @@ export default async function build(dir: string, conf = null): Promise<void> {
     console.log(chalk.green('Compiled successfully.\n'))
   }
 
-  const pageInfos = new Map()
+  const pageInfos = new Map<string, PageInfo>()
   const distPath = path.join(dir, config.distDir)
-  let pageKeys = Object.keys(mappedPages)
+  const pageKeys = Object.keys(mappedPages)
 
   for (const page of pageKeys) {
     const chunks = getPageChunks(page)
-    const actualPage = page === '/' ? 'index' : page
-    const info = await getPageInfo(
-      actualPage,
-      distPath,
-      buildId,
-      false,
-      config.target === 'serverless'
-    )
-
-    pageInfos.set(page, {
-      ...(info || {}),
-      chunks,
-    })
 
-    if (!(typeof info.serverSize === 'number')) {
-      pageKeys = pageKeys.filter(pg => pg !== page)
-    }
+    const actualPage = page === '/' ? '/index' : page
+    const size = await getPageSizeInKb(actualPage, distPath, buildId)
+    pageInfos.set(page, { size, chunks })
   }
 
   if (Array.isArray(configs[0].plugins)) {
     configs[0].plugins.some((plugin: any) => {
-      if (plugin.ampPages) {
-        plugin.ampPages.forEach((pg: any) => {
-          const info = pageInfos.get(pg)
-          if (info) {
-            info.ampOnly = true
-            pageInfos.set(pg, info)
-          }
-        })
+      if (!plugin.ampPages) {
+        return false
       }
-      return Boolean(plugin.ampPages)
+
+      plugin.ampPages.forEach((pg: any) => {
+        pageInfos.get(pg)!.isAmp = true
+      })
+      return true
     })
   }
 

packages/next/build/utils.ts

+import chalk from 'chalk'
 import crypto from 'crypto'
 import findUp from 'find-up'
 import fs from 'fs'
+import textTable from 'next/dist/compiled/text-table'
 import path from 'path'
+import stripAnsi from 'strip-ansi'
 import { promisify } from 'util'
+
 import prettyBytes from '../lib/pretty-bytes'
 import { recursiveReadDir } from '../lib/recursive-readdir'
+import { getPageChunks } from './webpack/plugins/chunk-graph-plugin'
 
 const fsStat = promisify(fs.stat)
 const fsExists = promisify(fs.exists)
@@ -20,78 +25,70 @@ export function collectPages(
   )
 }
 
-interface ChunksItem {
-  external: Set<string>,
-  internal: Set<string>
-}
-
-interface PageInfo {
-  ampOnly: boolean,
-  serverSize: number,
-  clientSize: number,
-  chunks: ChunksItem
+export interface PageInfo {
+  isAmp?: boolean
+  size: number
+  chunks?: ReturnType<typeof getPageChunks>
 }
 
-export function printTreeView(list: string[], pageInfos: Map<string, PageInfo>) {
-  /*
-    red for >250kb
-    yellow for >100kb
-    green for <100kb
-  */
-  const getSizeColor = (size: number): string => {
-    if (size < 100 * 1000) return '\x1b[32m'
-    if (size < 250 * 1000) return '\x1b[33m'
-    return '\x1b[31m'
+export function printTreeView(
+  list: string[],
+  pageInfos: Map<string, PageInfo>
+) {
+  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
+    return chalk.red.bold(size)
   }
 
+  const messages: string[][] = [
+    ['Page', 'Size', 'Files', 'Packages'].map(entry => chalk.underline(entry)),
+  ]
+
   list
-    .sort((a, b) => (a > b ? 1 : -1))
+    .sort((a, b) => a.localeCompare(b))
     .forEach((item, i) => {
-      const info = pageInfos.get(item)
-      let numExternal
-      let numInternal
-      let serverSize
-      let clientSize
-      let isAmp
-
-      if (info) {
-        isAmp = info.ampOnly
-        serverSize = info.serverSize
-        clientSize = info.clientSize
-
-        if (info.chunks) {
-          const { chunks } = info
-          numExternal = chunks.external.size
-          numInternal = chunks.internal.size
-        }
-      }
-
-      const corner =
+      const symbol =
         i === 0
           ? list.length === 1
             ? '─'
             : '┌'
+          : i === list.length - 1
+          ? '└'
           : '├'
 
-      console.log(` \x1b[90m${corner}\x1b[39m ${item}${isAmp ? ' (AMP)' : ''}`)
-
-      if (typeof numExternal === 'number') {
-        console.log(` \x1b[90m| \x1b[39mPackages: ${numExternal} Local modules: ${numInternal}`);
-      }
-      let sizes = ' \x1b[90m|'
-
-      if (typeof serverSize === 'number') {
-        sizes += getSizeColor(serverSize) +
-          ` Server size: ${prettyBytes(serverSize)}`
-      }
-      if (typeof clientSize === 'number') {
-        sizes += getSizeColor(clientSize) +
-          ` Client size: ${prettyBytes(clientSize)}`
-      }
+      const pageInfo = pageInfos.get(item)
+
+      messages.push([
+        `${symbol} ${item}`,
+        ...(pageInfo
+          ? [
+              pageInfo.isAmp
+                ? chalk.cyan('AMP')
+                : pageInfo.size >= 0
+                ? getPrettySize(pageInfo.size)
+                : 'N/A',
+              pageInfo.chunks
+                ? pageInfo.chunks.internal.size.toString()
+                : 'N/A',
+              pageInfo.chunks
+                ? pageInfo.chunks.external.size.toString()
+                : 'N/A',
+            ]
+          : ['', '', '']),
+      ])
+    })
 
-      if (sizes) console.log(sizes)
-      console.log(` \x1b[90m${i === list.length - 1 ? '└' : '|'}`);
+  console.log(
+    textTable(messages, {
+      align: ['l', 'l', 'r', 'r'],
+      stringLength: str => stripAnsi(str).length,
     })
+  )
 
   console.log()
 }
@@ -209,35 +206,18 @@ export async function getCacheIdentifier({
     .digest('hex')
 }
 
-export async function getPageInfo(
+export async function getPageSizeInKb(
   page: string,
   distPath: string,
-  buildId: string,
-  dev: boolean,
-  serverless?: boolean,
-) {
-  const info: any = {}
-  const staticPath = dev ? 'development' : buildId
+  buildId: string
+): Promise<number> {
   const clientBundle = path.join(
-    distPath, `static/${staticPath}/pages/`, `${page}.js`
+    distPath,
+    `static/${buildId}/pages/`,
+    `${page}.js`
   )
-  const serverPath = serverless
-    ? path.join(distPath, 'serverless/pages')
-    : path.join(distPath, 'server/static', staticPath, 'pages')
-
-  const serverBundle = path.join(serverPath, `${page}.js`)
-  info.clientBundle = clientBundle
-
-  if (!dev) {
-    try {
-      info.serverSize = (await fsStat(serverBundle)).size
-    } catch (_) {}
-    try {
-      info.clientSize = (await fsStat(clientBundle)).size
-    } catch (_) {}
-  }
-
-  if (page.match(/(_app|_error|_document)/)) return info
-
-  return info
+  try {
+    return (await fsStat(clientBundle)).size
+  } catch (_) {}
+  return -1
 }