A github action that provides detailed bundle analysis on PRs for next.js apps

Overview

Next.js Bundle Analysis Github Action

Analyzes each PR's impact on your next.js app's bundle size and displays it using a comment. Optionally supports performance budgets.

screenshot of bundle analysis comment

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!

$ 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 needed 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

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.

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.
  • This script assumes that running next build will successfully build your application. If you need additional scripts or logic to do so, you may need to update the action step called "Build next.js app" to the command needed to build your app. For example, if you have a npm run build step, that would be a good target to change it to. We plan to make this configurable via the generator in the future.
Comments
  • feat: add ability to specify custom build output directory

    feat: add ability to specify custom build output directory

    Adds the ability to specify a custom build output directory.

    Notes:

    • Thanks for your great work on this! Looking to make this change to make it usuable in a Nx monorepo I work with, where the app is built to a path that looks like dist/apps/... (per Nx recommendations)
    • Tests are passing, but didn't add any new tests — I think this would require creating a completely new fixture with a different package.json. If you'd like, I can add a new test suite
    • Could probably pull BUILD_OUTPUT_DIRECTORY into a file named utils.js or something 🤷
    opened by jzxhuang 7
  • add eof on template.yml

    add eof on template.yml

    Thanks to create great nextjs analizer. My project introduced this github action.

    Run npx -p nextjs-bundle-analysis generate to generate the file, but the eof was missing. eof was missing in the original template file, so added it.

    opened by 4geru 4
  • fix: table generation logic with budget

    fix: table generation logic with budget

    I think this should fix https://github.com/hashicorp/nextjs-bundle-analysis/issues/7 👀

    The difference is part of the budget column, but not all of it, so we want to render this column even if we aren't rendering the diff.

    opened by BRKalow 4
  • Cannot find module __bundle_analysis.json

    Cannot find module __bundle_analysis.json

    Thanks @jescalan for this fantastic project!

    Trying to get up and running here, and hitting this error:

    > npx nextjs-bundle-analysis generate
    
    Cannot find module '~/my-project/.next/analyze/__bundle_analysis.json'
    Require stack:
    - ~/.npm/_npx/38403/lib/node_modules/nextjs-bundle-analysis/compare.js
    

    I think we'll need to conditionally require here. Thoughts?

    opened by isaachinman 3
  • feat: add ability to specify minimum change threshold

    feat: add ability to specify minimum change threshold

    Inspired by preactjs/compressed-size-action, this PR adds a new configuration option minimumChangeThreshold to hide pages that have changes below the configured threshold.

    By default, the threshold is 0, meaning any changes to the global bundle size or the size of a page will cause them to be included in the report.

    opened by dstaley 2
  • Using working directory but failing in step Compare with base branch bundle

    Using working directory but failing in step Compare with base branch bundle

    Im using a working directory, which is used for every run. During "Upload bundle" i had to add it there too:

    path: ./apps/FOO/.next/analyze/__bundle_analysis.json

    But now it fails in the comparison step and i have no clue why...

    Download base branch bundle stats:

    ==> Conclusion: success
    ==> Branch: main
    ==> RunID: 1290529608
    ==> Artifact: 97934011
    ==> Downloading: bundle.zip (288 B)
      inflating: .next/analyze/base/bundle/__bundle_analysis.json
    

    So it seems to inflate something. No clue where, also used our working directory there, no success.

    Error in next step

    Run ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
    ls: cannot access '.next/analyze/base': No such file or directory
    
    opened by maapteh 2
  • [Question] Where in the code do you save base branch bundle?

    [Question] Where in the code do you save base branch bundle?

    Hi,

    Thank you for the amazing library! I was going through the code and I was wondering that where in the code, bundle for base branch is saved to the path analyze/base/?

    Thanks in advance!

    opened by ialisyed 1
  • Bug when using custom build directory

    Bug when using custom build directory

    Hello,

    I am trying to use this GHA for our project that is using a custom build directory. However, whenever the action step reaches Analyze bundle it fails, because the command npx -p nextjs-bundle-analysis report seems to still want to check the default .next build directory.

    No build output found at "myproject/.next" - you may not have your working directory set correctly, or not have run "next build"
    

    Yet in package.json:

    "buildOutputDirectory ": "build",
    
    opened by thomas-short 1
  • depends on `@next/bundle-analyzer`?

    depends on `@next/bundle-analyzer`?

    This GitHub Action depends on having @next/bundle-analyzer correctly configured in one's Next.js project right? If so, it may be useful to put that in the docs somewhere (happy to put up a PR). Although a very "duh" moment in retrospect, I only figured that out by reading the Action's steps and seeing it's looking for /next/analyze/__bundle_analysis.json

    opened by cjimmy 1
  • [COMPLIANCE] Update MPL 2.0 LICENSE

    [COMPLIANCE] Update MPL 2.0 LICENSE

    Hi there 👋

    This PR was auto-generated as part of an internal review of public repositories that are not in compliance with HashiCorp's licensing standards.

    Frequently Asked Questions

    Why am I getting this PR? This pull request was created because one or more of the following criteria was found:
    • This repo did not previously have a LICENSE file
    • A LICENSE file was present, but had a non-conforming name (e.g., license.txt)
    • A LICENSE file was present, but was missing an appropriate copyright statement

    More info is available in the RFC

    How do you determine the copyright date? The copyright date given in this PR is supposed to be the year the repository or project was created (whichever is older). If you believe the copyright date given in this PR is not valid, please reach out to:

    #proj-software-copyright

    I don't think this repo should be licensed under the terms of the Mozilla Public License 2.0. Who should I reach out to? If you believe this repository should not use an MPL 2.0 License, please reach out to [email protected]. Exemptions are considered on a case-by-case basis, but common reasons include if the project is co-managed by another entity that requires differing license terms, or if the project is part of an ecosystem that commonly uses a different license type (e.g., MIT or Apache 2.0).

    Please approve and merge this PR in a timely manner to keep this source code compliant with our OSS license agreement. If you have any questions or feedback, reach out to #proj-software-copyright.

    Thank you!


    Made with :heart: @HashiCorp

    automated legal 
    opened by hashicorp-copywrite[bot] 0
  • Add workflow step for build cache & restore

    Add workflow step for build cache & restore

    This PR addresses #4 and adds a workflow step to cache next's build cache & restore on subsequent workflow runs

    Consumers may customize the cache key to be more strict

    opened by jmfury 0
  • Add a note for using with app in subdirectory

    Add a note for using with app in subdirectory

    Hi! Our team recently moved to using a monorepo so our Next.js app was no longer in the root directory of the repo.

    According to the comment for defaults.run.working-directory I updated that to point to the subdir our app lives in, but this didn't work - on main no artifacts were found to be uploaded, and then branch builds would fail because they had nothing to compare against.

    It turns out defaults.run.working-directory only affects run steps, but uses steps will still run from the root! This means the paths given to uses: actions/cache@v2, uses: actions/upload-artifact@v2 and uses: dawidd6/action-download-artifact@v2 also need to be prefixed with the app subdirectory.

    This PR adds comments to make this more obvious. Cheers!

    opened by valeriangalliat 1
  • fix: use actions/github-script to set comment body

    fix: use actions/github-script to set comment body

    Setting action output using ::set-output was deprecated on 11th Oct 2022. See https://github.blog/changelog/2022-10-11-github-actions-deprecating-save-state-and-set-output-commands/ I've tried several approaches to switch to the new variant, but all of them have some kind of issues with multiline strings. So I tried something completely different and implemented it using actions/github-script.

    opened by maxnowack 1
  • Run a version that is up-to-date with the README

    Run a version that is up-to-date with the README

    opened by gthb 2
  • Run comparison against merge base

    Run comparison against merge base

    The existing template sets up a comparison against the latest bundle analysis on the target branch. But that misrepresents the effect of the current PR. The current PR might have no effect on bundle sizes but they have changed in the meantime on the target branch for some unrelated reason, and then the comparison will incorrectly imply that the current PR is having the inverse effect.

    So instead, default to running the comparison against the bundle analysis on github.event.pull_request.base.sha, which is the latest commit on the target branch that is also an ancestor of the tip of the PR branch (either by being the original commit from which the PR branch was forked, or the latest commit on the target branch that has been merged into the PR branch).

    opened by gthb 1
  • Add option for always showing gzip diff

    Add option for always showing gzip diff

    Hi! Awesome library. One thing that would help us - while we have a budget set, seeing the raw size of the gzip diff is almost always wanted, whereas the current setup hides it if the budget is set.

    I just added an option for allowing this.

    opened by jtadmor 2
  • Short-circuit next build before static generation starts

    Short-circuit next build before static generation starts

    Implement a custom wrapper around next build which exits after the webpack build completes. This should make the analysis run much faster, and will generally simplify setups because the data fetching that happens during static generation can often require additional environment variables and/or secrets.

    See: https://github.com/hashicorp/web-platform-packages/tree/main/packages/tools#next-build-webpack-only

    opened by BRKalow 0
Releases(0.4.0)
  • 0.4.0(Feb 23, 2022)

    What's Changed

    • feat: add ability to specify custom build output directory by @jzxhuang in https://github.com/hashicorp/nextjs-bundle-analysis/pull/14

    New Contributors

    • @jzxhuang made their first contribution in https://github.com/hashicorp/nextjs-bundle-analysis/pull/14

    Full Changelog: https://github.com/hashicorp/nextjs-bundle-analysis/compare/0.3.0...0.4.0

    Source code(tar.gz)
    Source code(zip)
  • 0.3.0(Nov 22, 2021)

  • 0.2.0(Jul 26, 2021)

  • 0.1.4(Jul 15, 2021)

  • 0.1.3(Jul 15, 2021)

    • Makes the collapsed "details" sections written to the comment configurable - on by default but can be turned off with showDetails config in package.json
    • Improvements and fixes for documentation, comments, and readme (thanks @isaachinman!)
    Source code(tar.gz)
    Source code(zip)
  • 0.1.2(Jul 15, 2021)

  • 0.1.1(Jul 14, 2021)

  • 0.1.0(Jul 14, 2021)

  • 0.0.1(Jul 14, 2021)

Owner
HashiCorp
Consistent workflows to provision, secure, connect, and run any infrastructure for any application.
HashiCorp
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Workflow to re-trigger workflow of all open PRs when base updates

Workflow to re-trigger workflow of all open PRs when base updates

James Tan 4 Aug 28, 2022
Contribute on this repository with VALID PRs to HACKTOBERFEST-2022 and earn amazing swags!

LINK- https://rbshop.netlify.app/ Hacktoberfest2022 You can make folders of programming languages and also you can contribute in the repo's below. Fee

Ranodeep Banerjee 17 Oct 25, 2022
GitHub Action that checks code and docs for offensive / exclusive terms and provides warnings.

Inclusiveness Analyzer Make your code inclusive! The Inclusiveness Analyzer is a GitHub action that checks your repository for offensive / exclusive t

Microsoft 21 Dec 1, 2022
A Next.js playground to test Reanimated bundle size.

React Native Reanimated Tree Shaking Playground Here we can test react-native-reanimated's bundle size. ?? Discussion here ?? Progress here Instructio

Fernando Rojo 22 Jun 16, 2022
Dynamic components with the power of next-gen bundle tools

Moon island architecture example Dynamic components with the power of next-gen bundle tools What is this? This example shows you how the moon-island a

idler 8 Oct 21, 2022
Search for food, recepies, and full detailed information on how to prepare them.

Foodipy | JavaScript Capstone This is a group project being built in our second module of our curriculum at microverse. its a web application for list

Alexander Oguzie-Ibeh 10 Mar 24, 2022
This repository contains the Solidity smart contract of Enso, a detailed list of features and deployment instructions.

Enso NFT Smart Contract This repository contains the Solidity smart contract of Enso, a detailed list of features and deployment instructions. We stro

enso NFT 3 Apr 24, 2022
Uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about their availability, average response time, and total uptime/downtime.

Uptime Monitoring API Uptime monitoring RESTful API server that allows authenticated users to monitor URLs, and get detailed uptime reports about thei

Mohamed Magdi 2 Jun 14, 2022
A more detailed discord data package explorer

Ever wondered what Data discord collects? Or did you ever want to view what's inside of a discord package? Discord Package is a customisable tool that allows you to view your data in a fancy way. You could also use our exporting feature to share your selected data with your friends.

Peter 220 Jan 5, 2023
GitHub Action that posts the report in a comment on a GitHub Pull Request from coverage data generated by nyc (istanbul)

GitHub Action: Report NYC coverage GitHub Action that posts the report in a comment on a GitHub Pull Request from coverage data generated by nyc (ista

Sid 16 Nov 23, 2022
A GitHub action to submit your dependency graph from your Mill build to GitHub.

Mill Dependency Submission A GitHub action to submit your dependency graph from your Mill build to GitHub via their Dependency Submission API. The mai

Chris Kipp 6 Dec 15, 2022
A GitHub Action that allows to debug GitHub workflows using VS Code.

VS Code Server Action A GitHub Action that allows to debug GitHub workflows using VS Code. Failing CI builds can be annoying especially since we don't

stateful 18 Dec 23, 2022
This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules to write modular JavaScript.

To-Do-List App This is my to-do list website built with html, css and JavaScript. In this project I used Webpack to bundle JavaScript and ES6 modules

Samuel Mwape 18 Sep 20, 2022
This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

This is a simple To-do list built with JavaScript, HTML and CSS. The project uses webpack to bundle JS-modules. Users can add and remove task from the list

Daniel Yerimah 6 Jun 7, 2022
An interactive app that allows adding, editing and removing tasks of a to-do list. Drag-and-drop featured added. Webpack was used to bundle all the Js modules in to one main Js file.

To-do List A to-do list app This app let you to set your own to-do list. Built With HTML CSS JavaScript WebPack Jest Live Page Page Link Getting Start

Kenny Salazar 7 May 5, 2022
Upload or Upload & Publish your bundle (apk or aab) to Huawei AppGallery with ConnectApi

appgallery-publisher Upload/Publish your bundle (apk or aab) to AppGallery automatically with appgallery-publisher Usage Single Javascript File Bash F

Mustafa Yiğit 17 Sep 19, 2022