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:analyzeThis 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
- yarn
npm install @next/bundle-analyzeryarn add @next/bundle-analyzerThen 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]]);