【Next.js】SSGビルド時のデータ量を可視化する [Techblog#3]

#!/usr/bin/env node/* eslint-disable no-console *//** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */
// edited to work with the appdir by @raphaelbadia
import path from 'path';import fs from 'fs';import { gzipSizeSync } from 'gzip-size';import { mkdirp } from 'mkdirp';
// Pull options from `package.json`const options = getOptions();const BUILD_OUTPUT_DIRECTORY = getBuildOutputDirectory(options);
// first we check to make sure that the build output directory existsconst nextMetaRoot = path.join(process.cwd(), BUILD_OUTPUT_DIRECTORY);try {  fs.accessSync(nextMetaRoot, fs.constants.R_OK);} catch (err) {  console.error(    `No build output found at "${nextMetaRoot}" - you may not have your working directory set correctly, or not have run "next build".`,  );  process.exit(1);}
// if so, we can import the build manifestconst buildMeta = JSON.parse(fs.readFileSync(path.join(nextMetaRoot, 'build-manifest.json'), 'utf8'));const appDirMeta = JSON.parse(fs.readFileSync(path.join(nextMetaRoot, 'app-build-manifest.json'), 'utf8'));
// this memory cache ensures we dont read any script file more than once// bundles are often shared between pagesconst memoryCache = {};
// since _app is the template that all other pages are rendered into,// every page must load its scripts. we'll measure its size hereconst globalBundle = buildMeta.pages['/_app'];const globalBundleSizes = getScriptSizes(globalBundle);
// next, we calculate the size of each page's scripts, after// subtracting out the global scriptsconst allPageSizes = Object.values(buildMeta.pages).reduce((acc, scriptPaths, i) => {  const pagePath = Object.keys(buildMeta.pages)[i];  const scriptSizes = getScriptSizes(    scriptPaths.filter((scriptPath) => !globalBundle.includes(scriptPath)),  );
  acc[pagePath] = scriptSizes;
  return acc;}, {});
const globalAppDirBundle = buildMeta.rootMainFiles;const globalAppDirBundleSizes = getScriptSizes(globalAppDirBundle);
const allAppDirSizes = Object.values(appDirMeta.pages).reduce((acc, scriptPaths, i) => {  const pagePath = Object.keys(appDirMeta.pages)[i];  const scriptSizes = getScriptSizes(    scriptPaths.filter((scriptPath) => !globalAppDirBundle.includes(scriptPath)),  );  acc[pagePath] = scriptSizes;
  return acc;}, {});
// format and write the outputconst rawData = JSON.stringify({  ...allAppDirSizes,  __global: globalAppDirBundleSizes,});
// log ouputs to the gh actions panelconsole.log(rawData);
mkdirp.sync(path.join(nextMetaRoot, 'analyze/'));fs.writeFileSync(path.join(nextMetaRoot, 'analyze/__bundle_analysis.json'), rawData);
// --------------// Util Functions// --------------
// given an array of scripts, return the total of their combined file sizesfunction getScriptSizes(scriptPaths) {  const res = scriptPaths.reduce(    (acc, scriptPath) => {      const [rawSize, gzipSize] = getScriptSize(scriptPath);      acc.raw += rawSize;      acc.gzip += gzipSize;
      return acc;    },    { raw: 0, gzip: 0 },  );
  return res;}
// given an individual path to a script, return its file sizefunction getScriptSize(scriptPath) {  const encoding = 'utf8';  const p = path.join(nextMetaRoot, scriptPath);
  let rawSize, gzipSize;  if (Object.keys(memoryCache).includes(p)) {    rawSize = memoryCache[p][0];    gzipSize = memoryCache[p][1];  } else {    const textContent = fs.readFileSync(p, encoding);    rawSize = Buffer.byteLength(textContent, encoding);    gzipSize = gzipSizeSync(textContent);    memoryCache[p] = [rawSize, gzipSize];  }
  return [rawSize, gzipSize];}
/** * Reads options from `package.json` */function getOptions(pathPrefix = process.cwd()) {  const pkg = JSON.parse(fs.readFileSync(path.join(pathPrefix, 'package.json'), 'utf8'));
  return { ...pkg.nextBundleAnalysis, name: pkg.name };}
/** * Gets the output build directory, defaults to `.next` * * @param {object} options the options parsed from package.json.nextBundleAnalysis using `getOptions` * @returns {string} */function getBuildOutputDirectory(options) {  return options.buildOutputDirectory || '.next';}

マージ時に差分データの作成を行わない(デプロイしないなど)場合は、差分データが無いため、レポート作成時に再びエラーになると思います

過去にデプロイ実績がある場合は、それをコピーして差分データとすることで回避できます (以下は過去に生成した差分データをartifactからダウンロードしてきて、再度アップロードしています)

なお、artifactには有効期限があることにも留意してください

jobs:  copy:    steps:    - name: Download base branch bundle stats      uses: dawidd6/action-download-artifact@v2      continue-on-error: true      with:        workflow: production.yml        branch: main        path: .next/analyze/base
    - name: Upload bundle      uses: actions/upload-artifact@v3      continue-on-error: true      with:        name: bundle        path: .next/analyze/base/bundle/__bundle_analysis.json