Skip to content

Analyzes each PR's impact on your nuxt.js app's bundle size and displays it using a comment. By combining this script with a github actions, it is possible to send bundle size measurement results to Pull Request.

License

Notifications You must be signed in to change notification settings

wattanx/nuxt-bundle-analysis

Repository files navigation

Nuxt.js Bundle Analysis Scripts

Analyzes each PR's impact on your nuxt.js app's bundle size and displays it using a comment. By combining this script with a github actions, it is possible to send bundle size measurement results to Pull Request.

image

Installation

  1. Run the following command. The command will create a .github/workflows directory in your project root and add a nuxt_bundle_analysis.yml file to it - that's all it takes!
npx -p nuxt-bundle-analysis generate
  1. Setting nuxt.config.js and Build. (If you are using webpack.) Set nuxt.config.js as follows so that bundle statistics are output. After configuration and build, .nuxt/stats.client.json will be output.
export default {
  build: {
    analyze: {
      generateStatsFile: true,
      analyzeMode: "disabled",
      openAnalyzer: false,
    },
  },
};

Configuration

This script uses the settings described in package.json. nuxtBundleAnalysis See here for options.

"devDependencies": {},
"nuxtBundleAnalysis": {
"statsFile": ".nuxt/stats/client.json"
}

Description of each script

  • report.ts report.ts calculates bundle size based on statsFile and outputs data for comparison.(analyze/__bundle_analysis.json is generated.)

  • compare.ts compare.ts compares analyze/base/bundle/__bundle_analysis.json and analyze/__bundle_analysis.json and generates a text file containing the difference in bundle size The following is an example of the process.(analyze/__bundle_analysis_comment.txt is generated.)

Options

property type description default
statsFile string The path to the json file containing bundle statistics. (Use for builder: webpack.) .nuxt/stats/client.json
buildOutputDirectory string Directory generated by nuxt build .nuxt
minimumChangeThreshold number The threshold under which pages will be considered unchanged. 0
clientDir string The directory where the client chunk is generated. (Use for builder: webpack.) dist/client
builder string Sets the builder of nuxt.(webpack or vite)
It can also be set using NUXT_BUNDLE_ANALYSIS_BUILDER.
webpack
outputDirectory string The directory where the output files are generated. .output

GitHub Actions Sample

actions-template

Caveats

Since this Actions works by comparing the base bundle to each PR, the first time it is run it will fail because there is no base to compare.

Ideally, the changes would be committed directly to the default branch, where the base bundle would be generated, and the subsequent branch would be a valid comparison so that the script would work as expected.

Actions are executed at each timing of merge into the main branch or PR as follows.

About

Analyzes each PR's impact on your nuxt.js app's bundle size and displays it using a comment. By combining this script with a github actions, it is possible to send bundle size measurement results to Pull Request.

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published