RelativeCI

In-depth webpack bundle analysis and monitoring

Gatsby: Output webpack stats

To output the webpack stats JSON file on Gatsby, you can use a specialized webpack plugin like FormidableLabs/webpack-stats-plugin.

Install

npm install --save-dev webpack-stats-plugin
yarn add --dev webpack-stats-plugin
pnpm add -D webpack-stats-plugin

Configure

The webpack stats JSON data and structure are controlled by the webpack config stats options. RelativeCI agent extracts data from assets, chunks, and modules entries, and the corresponding stats options are required:

gatsby-node.js
const { StatsWriterPlugin } = require('webpack-stats-plugin');
exports.onCreateWebpackConfig = ({ stage, plugins, actions }) => {
if (stage === 'build-javascript') {
actions.setWebpackConfig({
plugins: [
new StatsWriterPlugin({
filename: '../webpack-stats.json',
stats: {
assets: true,
chunks: true,
modules: true
}
)
]
});
}
};

Exclude assets or modules

If you need to exclude particular assets or modules, you can use the webpack stats excludeAssets or excludeModules configuration options:

const { StatsWriterPlugin } = require('webpack-stats-plugin');
exports.onCreateWebpackConfig = ({ stage, plugins, actions }) => {
if (stage === 'build-javascript') {
actions.setWebpackConfig({
plugins: [
new StatsWriterPlugin({
filename: '../webpack-stats.json',
stats: {
assets: true,
chunks: true,
modules: true,
// Exclude webpack-stats.json asset
excludeAssets: [/webpack-stats.json/],
// Exclude custom-module.js module
excludeModules: [/custom-module.js/]
}
)
]
});
}
};

Advanced transforms

For more advanced cases, you can use the webpack-stats-plugin transform option to access and manipulate the webpack stats result.

Optimize the webpack stats JSON file size

The module's data can grow quite large for projects with a high number of modules. To optimize the webpack stats JSON file size, you can use the transform property to output only the data required by the RelativeCI agent or bundle-stats:

Install @bundle-stats/plugin-webpack-filter

npm install --save-dev @bundle-stats/plugin-webpack-filter
yarn add --dev @bundle-stats/plugin-webpack-filter
pnpm add -D @bundle-stats/plugin-webpack-filter

Filter the webpack stats data

const { StatsWriterPlugin } = require('webpack-stats-plugin');
const filterWebpackStats = require('@bundle-stats/plugin-webpack-filter').default;
exports.onCreateWebpackConfig = ({ stage, plugins, actions }) => {
if (stage === 'build-javascript') {
actions.setWebpackConfig({
plugins: [
new StatsWriterPlugin({
filename: '../webpack-stats.json',
stats: {
assets: true,
chunks: true,
modules: true,
},
transform: (webpackStats) => {
const filteredSource = filterWebpackStats(webpackStats);
return JSON.stringify(filteredSource);
}
)
]
});
}
};

Resources


To avoid issues with other tools that check if the repository has uncommitted changes or if you are publishing your project as an npm package, consider adding the generated webpack stats file to .gitingore / .npmignore.

.gitignore
webpack-stats.json
.npmignore
webpack-stats.json


Need help?Contact us via email, Twitter, or GitHub!

Start analyzing and monitoring yourwebpack bundle