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)
⚠️ It is not an npm package, so please copy it to your own project.
Usage
- 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,
},
},
};
- Setting package.json
This script uses the settings described in package.json.
nuxtBundleAnalysis
See here for options.
"devDependencies": {},
"nuxtBundleAnalysis": {
"statsFile": ".nuxt/stats/client.json"
}
-
Run report.js
or report.ts
report.js
or report.ts
calculates bundle size based on statsFile
and outputs data for comparison.(analyze/__bundle_analysis.json
is generated.)
-
Create __bundle_analysis.json
as a basis for comparison.
Create __bundle.analysis.json
in analyze/base/bundle
for comparison.
-
Run compare.js
or compare.ts
compare.js
or 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. | .nuxt/stats/client.json |
buildOutputDirectory | string | Directory generated by nuxt build | .nuxt |
GitHub Actions Sample
actions-template