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.

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

2. 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.