To output the webpack stats JSON file on Next.js, use 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. The RelativeCI agent extracts data from assets
, chunks
, and modules
entries. The corresponding stats options are required:
const { StatsWriterPlugin } = require('webpack-stats-plugin')
module.exports = { webpack: (config, options) => { const { dev, isServer } = options;
// Output webpack stats JSON file only for // client-side/production build if (!dev && !isServer) { config.plugins.push( new StatsWriterPlugin({ filename: '../webpack-stats.json', stats: { assets: true, chunks: true, modules: true } }) ); }
return config; }};
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')
module.exports = { webpack: (config, options) => { const { dev, isServer } = options;
// Output webpack stats JSON file only for // client-side/production build if (!dev && !isServer) { config.plugins.push( 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/] } }) ); }
return config; }};
Advanced transforms
For advanced cases, you can use the webpack-stats-plugin transform option to extract and manipulate the webpack stats result.
Optimize the JSON file size
The module's data can get 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;
module.exports = { webpack: (config, options) => { const { dev, isServer } = options;
// Output webpack stats JSON file only for // client-side/production build if (!dev && !isServer) { config.plugins.push( new StatsWriterPlugin({ filename: '../webpack-stats.json', stats: { assets: true, chunks: true, modules: true, }, transform: (webpackStats) => { const filteredSource = filterWebpackStats(webpackStats); return JSON.stringify(filteredSource); } }) ); }
return config; }};
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 .gitignore
/.npmignore
.
webpack-stats.json
webpack-stats.json