nba
next-bundle-analyzer
npm i next-bundle-analyzer
nba

next-bundle-analyzer

NextJS version of Webpack Bundle Analyzer.

by Josselin BUILS

0.6.4 (see all)License:MITTypeScript:Not FoundCategories:Next.js Bundle Analysis
npm i next-bundle-analyzer
Readme

Next Bundle Analyzer

Motivation

Webpack Bundle Analyzer is a great tool to analyze the bundles of web applications built on top of Webpack but trying to use it to optimize a large website with many pages can be tricky because you don't know which pages the different chunks belong to.

There is an official wrapper dedicated to Next.js, @next/bundle-analyzer, but it only allows (for now) to generate standard reports for the server and client builds of Next.

This library generates customized Webpack Bundle Analyzer reports in order to make them easier to use for Next users.

Demo

Installation

We recommend installing next-bundle-analyzer as dev dependency:

npm install -D next-bundle-analyzer

or

yarn add -D next-bundle-analyzer

Usage

// next.config.js

const shouldAnalyzeBundles = process.env.ANALYZE === true;

let nextConfig = {
  // [...]
};

if (shouldAnalyzeBundles) {
  const withNextBundleAnalyzer =
    require('next-bundle-analyzer')(/* options come there */);
  nextConfig = withNextBundleAnalyzer(nextConfig);
}

module.exports = nextConfig;

⚠️ If next-bundle-analyzer has been installed as dev dependency, itshould be required conditionally to prevent breaking Next.js in production.

Options

Root options

OptionValuesDefaultDescription
clientOnlytrue falsetrueWhen true, generate only a report for client side build.
enabledtrue falsetrueAllows to enable/disable the plugin.
format'html' 'json' ['html', 'json']'html'The format of the report(s) to generate. It can be a single format or a list.
htmlSee HTML options.{}Options related to the HTML report.
jsonSee JSON options.{}Options related to the JSON report.
reportDirstring'analyze'Name of the directory that will contain the reports. Relative to Webpack output path.
reportFilenamestring'bundles'

'-client' and '-server' suffixes will be added if clientOnly is false.
Name of the report without the extension.

HTML options

OptionValuesDefaultDescription
opentrue falsetrueWhen true, report opens automatically once generated.

JSON options

OptionValuesDefaultDescription
filterObject with the same structure than the JSON report to filter.

Use true as value to keep a key.
nullFilter to apply to the JSON report in order to keep only some keys.

Downloads/wk

1.7K

GitHub Stars

3

LAST COMMIT

4mos ago

MAINTAINERS

1

CONTRIBUTORS

0

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
0.6.4
latest
4mos ago
No tutorials found
Add a tutorial