Bundle Analyzer

Bundle Analyzer visualizes size of output files with an interactive treemap. This helps you understand what’s taking the most space in the bundles.

superplate serves optional plugin which adds @next/bundle-analyzer to the created project.

Run the command below:

npm run build:analyze

This should open 2 pages in the browser. One for client bundles, and one for the server bundles.

Adding Bundler Analyzer to your project later#

tip

All this work will be handled automatically by superplate, so you don’t need to do anything extra as long as you choose Bundle Analyzer plugin during the project creation phase.

If you didn't choose the Bundle Analyzer plugin during project creation phase, you can follow the instructions below to add it.

npm install @next/bundle-analyzer

Then add followings to config file

next.config.js
const withPlugins = require('next-compose-plugins');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
})
module.exports = withPlugins([[withBundleAnalyzer]]);

Refer to official documentation for detailed usage →

Last updated on by Necati Özmen