npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

next-bundle-analyzer

v0.6.8

Published

NextJS version of Webpack Bundle Analyzer.

Downloads

34,834

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

| Option | Values | Default | Description | | -------------- | ---------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | clientOnly | true false | true | When true, generate only a report for client side build. | | enabled | true false | true | Allows 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. | | html | See HTML options. | {} | Options related to the HTML report. | | json | See JSON options. | {} | Options related to the JSON report. | | reportDir | string | 'analyze' | Name of the directory that will contain the reports. Relative to Webpack output path. | | reportFilename | string | 'bundles''-client' and '-server' suffixes will be added if clientOnly is false. | Name of the report without the extension. |

HTML options

| Option | Values | Default | Description | | ------ | -------------- | ------- | ------------------------------------------------------- | | open | true false | true | When true, report opens automatically once generated. |

JSON options

| Option | Values | Default | Description | | ------ | -------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------- | | filter | Object with the same structure than the JSON report to filter.Use true as value to keep a key. | null | Filter to apply to the JSON report in order to keep only some keys. |