Merge branch 'main' into ds.monorepo

Author: dstaley

LICENSE

@@ -4,7 +4,7 @@ Analyzes each PR's impact on your next.js app's bundle size and displays it usin
 
 ![screenshot of bundle analysis comment](https://p176.p0.n0.cdn.getcloudapp.com/items/BluKP76d/2b51f74a-9c0f-481f-b76a-9b36cf37d369.png?v=ddd23d0d9ee1ee9ad40487d181ed917f)
 
-### Installation
+## Installation
 
 It's pretty simple to get this set up, just run the following command and answer the prompts. The command will create a `.github/workflows` directory in your project root and add a `next_bundle_analysis.yml` file to it - that's all it takes!
 
@@ -14,20 +14,36 @@ $ npx -p nextjs-bundle-analysis generate
 
 > **NOTE**: Due to github actions' lack of support for more complex actions, the experience of getting this set up is unusual in that it requires a generation script which copies most of the logic into your project directly. As soon as github adds support for the [features](https://github.com/actions/runner/pull/1144) [needed](https://github.com/actions/runner/pull/1144#discussion_r651087316) to properly package up this action, we'll put out an update that removes the extra boilerplate and makes usage much simpler. Until then, we all have no choice but to endure this unusual setup process.
 
-### Configuration
+## Configuration
 
 Config values are written to `package.json` under the key `nextBundleAnalysis`, and can be changed there any time. You can directly edit the workflow file if you want to adjust your default branch or the directory that your nextjs app lives in (especially if you are using a `srcDir` or something similar).
 
-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.
+### `showDetails (boolean)`
 
-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.
+(Optional, defaults to `true`) 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.
+
+### `buildOutputDirectory (string)`
+
+(Optional, defaults to `.next`) 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
+### `budget (number)`
+
+(Optional) The file size, in bytes, to budget for first page load size. For example, if `budget` was set to `358400` (350 KB) and a page's first load size was 248 KB, the report would list that page as having used 70% of the performance budget.
+
+### `budgetPercentIncreaseRed (number)`
+
+(Optional, but required if `budget` is specified) If a page's first load size has increased more than `budgetPercentIncreaseRed` percent, display a 🔴 to draw attention to the change.
+
+### `minimumChangeThreshold (number)`
+
+(Optional, defaults to `0`) The threshold under which pages will be considered unchanged. For example, if `minimumChangeThreshold` was set to `500` and a page's size increased by `300 B`, it will be considered unchanged.
+
+## 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.
 - Since this plugin works by comparing the base bundle against each PR, the first time it is run, it will fail since it has no base to compare against. This is expected - ideally you can just commit the changes directly to your default branch, where it will run to generate the base bundle, then anything that branches off after that will have a valid comparison point and the script will work as expected.

README.md

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export default function IndexPage() {
   return <p>hello world</p>
 }

__tests__/__fixtures__/basic/pages/index.jsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 module.exports = {
   distDir: 'dist',
 }

__tests__/__fixtures__/custom-output-directory/next.config.js

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 export default function IndexPage() {
   return <p>hello world</p>
 }

__tests__/__fixtures__/custom-output-directory/pages/index.jsx

@@ -1,3 +1,8 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 const path = require('path')
 const fs = require('fs')
 const { execSync } = require('child_process')

__tests__/index.js

@@ -1,11 +1,24 @@
 #!/usr/bin/env node
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
 
-const filesize = require('filesize')
+
+const originalFilesize = require('filesize')
 const numberToWords = require('number-to-words')
 const fs = require('fs')
 const path = require('path')
 const { getBuildOutputDirectory, getOptions } = require('./utils')
 
+// Override default filesize options to display a non-breakable space as a spacer.
+const filesize = (bytes, options) => {
+  return originalFilesize(bytes, {
+    spacer: ' ',
+    ...options,
+  })
+}
+
 // Pull options from `package.json`
 const options = getOptions()
 
@@ -43,17 +56,23 @@ delete currentBundle.__global
 delete baseBundle.__global
 
 // calculate the difference between the current bundle and the base branch's
-const globalBundleChanges =
-  globalBundleCurrent.gzip !== globalBundleBase.gzip
-    ? {
-        page: 'global',
-        raw: globalBundleCurrent.raw,
-        gzip: globalBundleCurrent.gzip,
-        gzipDiff: globalBundleCurrent.gzip - globalBundleBase.gzip,
-        increase:
-          Math.sign(globalBundleCurrent.gzip - globalBundleBase.gzip) > 0,
-      }
-    : false
+let globalBundleChanges = false
+const globalGzipDiff = globalBundleCurrent.gzip - globalBundleBase.gzip
+// only report a global bundle size change if we don't have a minimum change
+// threshold configured, or if the change is greater than the threshold
+if (
+  globalGzipDiff !== 0 &&
+  (!('minimumChangeThreshold' in options) ||
+    Math.abs(globalGzipDiff) > options.minimumChangeThreshold)
+) {
+  globalBundleChanges = {
+    page: 'global',
+    raw: globalBundleCurrent.raw,
+    gzip: globalBundleCurrent.gzip,
+    gzipDiff: globalGzipDiff,
+    increase: Math.sign(globalGzipDiff) > 0,
+  }
+}
 
 // now we're going to go through each of the pages in the current bundle and
 // run analysis on each one.
@@ -75,7 +94,14 @@ for (let page in currentBundle) {
     const rawDiff = currentStats.raw - baseStats.raw
     const gzipDiff = currentStats.gzip - baseStats.gzip
     const increase = !!Math.sign(gzipDiff)
-    changedPages.push({ page, ...currentStats, rawDiff, gzipDiff, increase })
+    // only report a page size change if we don't have a minimum change
+    // threshold configured, or if the change is greater than the threshold
+    if (
+      !('minimumChangeThreshold' in options) ||
+      Math.abs(gzipDiff) > options.minimumChangeThreshold
+    ) {
+      changedPages.push({ page, ...currentStats, rawDiff, gzipDiff, increase })
+    }
   }
 }
 

compare.js

@@ -1,4 +1,9 @@
 #!/usr/bin/env node
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 
 const path = require('path')
 const fs = require('fs')
@@ -28,6 +33,12 @@ inquirer
         'If you exceed this percentage of the budget or filesize, it will be highlighted in red',
       default: 20,
     },
+    {
+      type: 'number',
+      name: 'minimumChangeThreshold',
+      message: `If a page's size change is below this threshold (in bytes), it will be considered unchanged'`,
+      default: 0,
+    },
   ])
   .then((answers) => {
     // write the config values to package.json
@@ -36,6 +47,7 @@ inquirer
     packageJsonContent.nextBundleAnalysis = {
       budget: answers.budget * 1024,
       budgetPercentIncreaseRed: answers.redIndicatorPercentage,
+      minimumChangeThreshold: answers.minimumChangeThreshold,
       showDetails: true, // add a default "showDetails" argument
     }
     fs.writeFileSync(

generate.js

@@ -27,7 +27,7 @@
     "action"
   ],
   "author": "Jeff Escalante",
-  "license": "GPL-2.0",
+  "license": "MPL-2.0",
   "jest": {
     "testPathIgnorePatterns": [
       "/node_modules/",

package.json

@@ -1,4 +1,9 @@
 #!/usr/bin/env node
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
 
 const path = require('path')
 const fs = require('fs')