Merge pull request #14 from jzxhuang/feat/custom-build-output-directory

Bryce Kalow · web-flow · commit c5a1e07cdc00 · 2022-02-18T09:04:13.000-06:00
diff --git a/README.md b/README.md
@@ -20,6 +20,13 @@ Config values are written to `package.json` under the key `nextBundleAnalysis`,
 
 There is one config value, `showDetails`, that is set to "true" by default. This option renders a collapsed "details" section under each section of the bundle analysis comment explaining some of the finer details of the numbers provided. If you feel like this is not necessary and you and/or those working on your project understand the details, you can set this option to `false` and that section will not render.
 
+If your application [builds to a custom directory](https://nextjs.org/docs/api-reference/next.config.js/setting-a-custom-build-directory), you can specify this with the key `buildOutputDirectory`. You will also need to replace all instances of `.next` in `next_bundle_analysis.yml` with your custom output directory.
+
+For example, if you build to `dist`, you should:
+
+- Set `package.json.nextBundleAnalysis.buildOutputDirectory` to `"dist"`.
+- In `nextjs_bundle_analysis`, replace all instances of `.next` with `dist`.
+
 ### Caveats
 
 - This plugin only analyzes the direct bundle output from next.js. If you have added any other scripts via the `<script>` tag, especially third party scripts and things like analytics or other tracking scripts, these are not included in the analysis. Scripts of this nature should _probably_ be loaded in behind a consent manager and should not make an impact on your initial load, and as long as this is how you handle them it should make no difference, but it's important to be aware of this and account for the extra size added by these scripts if they are present in your app.
diff --git a/__tests__/__fixtures__/basic/package-lock.json b/__tests__/__fixtures__/basic/package-lock.json
diff --git a/__tests__/__fixtures__/basic/package.json b/__tests__/__fixtures__/basic/package.json
diff --git a/__tests__/__fixtures__/basic/pages/index.jsx b/__tests__/__fixtures__/basic/pages/index.jsx
diff --git a/__tests__/__fixtures__/custom-output-directory/next.config.js b/__tests__/__fixtures__/custom-output-directory/next.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  distDir: 'dist',
+}
diff --git a/__tests__/__fixtures__/custom-output-directory/package-lock.json b/__tests__/__fixtures__/custom-output-directory/package-lock.json
diff --git a/__tests__/__fixtures__/custom-output-directory/package.json b/__tests__/__fixtures__/custom-output-directory/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "bundle-analysis-test-fixture",
+  "version": "1.0.0",
+  "description": "its a test",
+  "main": "index.js",
+  "author": "",
+  "license": "GPL-2.0",
+  "dependencies": {
+    "next": "^11.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "scripts": {
+    "build": "next build"
+  },
+  "nextBundleAnalysis": {
+    "budget": 358400,
+    "budgetPercentIncreaseRed": 20,
+    "buildOutputDirectory": "dist"
+  }
+}
diff --git a/__tests__/__fixtures__/custom-output-directory/pages/index.jsx b/__tests__/__fixtures__/custom-output-directory/pages/index.jsx
@@ -0,0 +1,3 @@
+export default function IndexPage() {
+  return <p>hello world</p>
+}
diff --git a/__tests__/index.js b/__tests__/index.js
@@ -2,46 +2,74 @@ const path = require('path')
 const fs = require('fs')
 const { execSync } = require('child_process')
 const rimraf = require('rimraf')
-const { afterAll, beforeAll, expect } = require('@jest/globals')
+const { afterEach, beforeEach, expect } = require('@jest/globals')
 const mkdirp = require('mkdirp')
+const { getBuildOutputDirectory, getOptions } = require('../utils')
 
 const fixturesPath = path.join(__dirname, '__fixtures__')
 
-beforeAll(() => {
-  process.chdir(fixturesPath)
-  execSync('npm install')
-  execSync('npm run build')
-})
+// Get all test suites (fixtures)
+const fixtures = fs
+  .readdirSync(fixturesPath, { withFileTypes: true })
+  .filter((dirent) => dirent.isDirectory())
+  .map((dirent) => dirent.name)
 
-afterAll(() => {
-  rimraf.sync(path.join(fixturesPath, '.next'))
-})
+describe('sort of integration', () => {
+  fixtures.forEach((dirName) => {
+    describe(`fixture ${dirName}`, () => {
+      const cwd = path.join(fixturesPath, dirName)
+      const options = getOptions(cwd)
+      const buildOutputDirectory = getBuildOutputDirectory(options)
+
+      beforeEach(() => {
+        process.chdir(cwd)
+        execSync('npm install')
+        execSync('npm run build')
+      })
+
+      afterEach(() => {
+        rimraf.sync(path.join(cwd, buildOutputDirectory))
+      })
+
+      test(`bundle analysis action generates report and compares artifacts correctly ${dirName}`, () => {
+        // make sure the 'report' command works
+        execSync('node ../../../report.js')
+        const bundleAnalysis = fs.readFileSync(
+          path.join(
+            process.cwd(),
+            buildOutputDirectory,
+            'analyze/__bundle_analysis.json'
+          ),
+          'utf8'
+        )
+        expect(bundleAnalysis.length).toBeGreaterThan(1)
+
+        // create a fake artifact download - in the real world this would pull from
+        // github as part of the action flow
+        mkdirp.sync(
+          path.join(process.cwd(), buildOutputDirectory, 'analyze/base/bundle')
+        )
+        fs.writeFileSync(
+          path.join(
+            process.cwd(),
+            buildOutputDirectory,
+            'analyze/base/bundle/__bundle_analysis.json'
+          ),
+          bundleAnalysis
+        )
 
-test('sort of integration', () => {
-  // make sure the 'report' command works
-  execSync('node ../../report.js')
-  const bundleAnalysis = fs.readFileSync(
-    path.join(process.cwd(), '.next/analyze/__bundle_analysis.json'),
-    'utf8'
-  )
-  expect(bundleAnalysis.length).toBeGreaterThan(1)
-
-  // create a fake artifact download - in the real world this would pull from
-  // github as part of the action flow
-  mkdirp.sync(path.join(process.cwd(), '.next/analyze/base/bundle'))
-  fs.writeFileSync(
-    path.join(
-      process.cwd(),
-      '.next/analyze/base/bundle/__bundle_analysis.json'
-    ),
-    bundleAnalysis
-  )
-
-  // make sure the 'compare' command works
-  execSync('node ../../compare.js')
-  const comment = fs.readFileSync(
-    path.join(process.cwd(), '.next/analyze/__bundle_analysis_comment.txt'),
-    'utf8'
-  )
-  expect(comment).toMatch(/no changes to the javascript bundle/)
+        // make sure the 'compare' command works
+        execSync('node ../../../compare.js')
+        const comment = fs.readFileSync(
+          path.join(
+            process.cwd(),
+            buildOutputDirectory,
+            'analyze/__bundle_analysis_comment.txt'
+          ),
+          'utf8'
+        )
+        expect(comment).toMatch(/no changes to the javascript bundle/)
+      })
+    })
+  })
 })
diff --git a/compare.js b/compare.js
@@ -4,28 +4,29 @@ const filesize = require('filesize')
 const numberToWords = require('number-to-words')
 const fs = require('fs')
 const path = require('path')
-
-// import the current and base branch bundle stats
-const currentBundle = require(path.join(
-  process.cwd(),
-  '.next/analyze/__bundle_analysis.json'
-))
-const baseBundle = require(path.join(
-  process.cwd(),
-  '.next/analyze/base/bundle/__bundle_analysis.json'
-))
+const { getBuildOutputDirectory, getOptions } = require('./utils')
 
 // Pull options from `package.json`
-const options = require(path.join(
-  process.cwd(),
-  'package.json'
-)).nextBundleAnalysis
+const options = getOptions()
 
 const BUDGET = options.budget
 const BUDGET_PERCENT_INCREASE_RED = options.budgetPercentIncreaseRed
 // this must be explicitly set to false not to render
 const SHOW_DETAILS =
   options.showDetails === undefined ? true : options.showDetails
+const BUILD_OUTPUT_DIRECTORY = getBuildOutputDirectory(options)
+
+// import the current and base branch bundle stats
+const currentBundle = require(path.join(
+  process.cwd(),
+  BUILD_OUTPUT_DIRECTORY,
+  'analyze/__bundle_analysis.json'
+))
+const baseBundle = require(path.join(
+  process.cwd(),
+  BUILD_OUTPUT_DIRECTORY,
+  'analyze/base/bundle/__bundle_analysis.json'
+))
 
 // kick it off
 let output = `## 📦 Next.js Bundle Analysis
@@ -173,7 +174,11 @@ console.log(output)
 // and to cap it off, we write the output to a file which is later read in as comment
 // contents by the actions workflow.
 fs.writeFileSync(
-  path.join(process.cwd(), '.next/analyze/__bundle_analysis_comment.txt'),
+  path.join(
+    process.cwd(),
+    BUILD_OUTPUT_DIRECTORY,
+    'analyze/__bundle_analysis_comment.txt'
+  ),
   output.trim()
 )
 
diff --git a/report.js b/report.js
@@ -4,20 +4,25 @@ const path = require('path')
 const fs = require('fs')
 const gzSize = require('gzip-size')
 const mkdirp = require('mkdirp')
+const { getBuildOutputDirectory, getOptions } = require('./utils')
 
-// first we check to make sure that the `.next` directory exists
-const nextMetaRoot = path.join(process.cwd(), '.next')
+// 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 exists
+const nextMetaRoot = path.join(process.cwd(), BUILD_OUTPUT_DIRECTORY)
 try {
   fs.accessSync(nextMetaRoot, fs.constants.R_OK)
 } catch (err) {
   console.error(
-    `No ".next" directory found at "${nextMetaRoot}" - you may not have your working directory set correctly, or not have run "next build".`
+    `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 manifest
-const buildMeta = require(path.join(process.cwd(), '.next/build-manifest.json'))
+const buildMeta = require(path.join(nextMetaRoot, 'build-manifest.json'))
 
 // this memory cache ensures we dont read any script file more than once
 // bundles are often shared between pages
diff --git a/template.yml b/template.yml
@@ -1,4 +1,4 @@
-name: "Next.js Bundle Analysis"
+name: 'Next.js Bundle Analysis'
 
 on:
   pull_request:
@@ -21,7 +21,7 @@ jobs:
       - name: Set up node
         uses: actions/setup-node@v1
         with:
-          node-version: "14.x"
+          node-version: '14.x'
 
       - name: Install dependencies
         uses: bahmutov/npm-install@v1
@@ -32,6 +32,8 @@ jobs:
         env:
           cache-name: cache-next-build
         with:
+          # if you use a custom build directory, replace all instances of `.next` in this file with your build directory
+          # ex: if your app builds to `dist`, replace `.next` with `dist`
           path: .next/cache
           # change this if you prefer a more strict cache
           key: ${{ runner.os }}-build-${{ env.cache-name }}
@@ -92,7 +94,7 @@ jobs:
         id: fc
         with:
           issue-number: ${{ github.event.number }}
-          body-includes: "<!-- __NEXTJS_BUNDLE -->"
+          body-includes: '<!-- __NEXTJS_BUNDLE -->'
 
       - name: Create Comment
         uses: peter-evans/create-or-update-comment@v1.4.4
@@ -108,4 +110,4 @@ jobs:
           issue-number: ${{ github.event.number }}
           body: ${{ steps.get-comment-body.outputs.body }}
           comment-id: ${{ steps.fc.outputs.comment-id }}
-          edit-mode: replace
+          edit-mode: replace
diff --git a/utils.js b/utils.js
@@ -0,0 +1,23 @@
+const path = require('path')
+
+/**
+ * Reads options from `package.json`
+ */
+const getOptions = (pathPrefix = process.cwd()) => {
+  return require(path.join(pathPrefix, 'package.json')).nextBundleAnalysis
+}
+
+/**
+ * Gets the output build directory, defaults to `.next`
+ *
+ * @param {object} options the options parsed from package.json.nextBundleAnalysis using `getOptions`
+ * @returns {string}
+ */
+const getBuildOutputDirectory = (options) => {
+  return options.buildOutputDirectory || '.next'
+}
+
+module.exports = {
+  getOptions,
+  getBuildOutputDirectory,
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ distDir: 'dist',`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function IndexPage() {`
	`2`	`+ return <p>hello world</p>`
	`3`	`+}`