Socket
Socket
Sign inDemoInstall

nuxt-bundle-analysis

Package Overview
Dependencies
55
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

nuxt-bundle-analysis

Analyzes each PR's impact on your nuxt.js app's bundle size and displays it using a comment.


Version published
Maintainers
1
Weekly downloads
19
increased by280%

Weekly downloads

Readme

Source

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. (Nuxt3 is not supported)

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

propertytypedescriptiondefault
statsFilestringThe path to the json file containing bundle statistics..nuxt/stats/client.json
buildOutputDirectorystringDirectory generated by nuxt build.nuxt
minimumChangeThresholdnumberThe threshold under which pages will be considered unchanged.0
clientDirstringThe directory where the client chunk is generated.dist/client

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.

Keywords

FAQs

Last updated on 27 Sep 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc