JSPM

@next/bundle-analyzer

15.2.1-canary.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3316268
  • Score
    100M100P100Q204472F
  • License MIT

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@next/bundle-analyzer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    Next.js + Webpack Bundle Analyzer

    Use webpack-bundle-analyzer in your Next.js project

    Installation

    npm install @next/bundle-analyzer

    or

    yarn add @next/bundle-analyzer

    Note: if installing as a devDependency make sure to wrap the require in a process.env check as next.config.js is loaded during next start as well.

    Usage with environment variables

    Create a next.config.js (and make sure you have next-bundle-analyzer set up)

    const withBundleAnalyzer = require('@next/bundle-analyzer')({
      enabled: process.env.ANALYZE === 'true',
    })
    module.exports = withBundleAnalyzer({})

    Or configuration as a function:

    module.exports = (phase, defaultConfig) => {
      return withBundleAnalyzer(defaultConfig)
    }

    Then you can run the command below:

    # Analyze is done on build when env var is set
    ANALYZE=true yarn build

    When enabled three HTML files (client.html, edge.html and nodejs.html) will be outputted to <distDir>/analyze/. One will be for the nodejs server bundle, one for the edge server bundle, and one for the browser bundle.

    Options

    To disable automatically opening the report in your default browser, set openAnalyzer to false:

    const withBundleAnalyzer = require('@next/bundle-analyzer')({
      enabled: process.env.ANALYZE === 'true',
      openAnalyzer: false,
    })
    module.exports = withBundleAnalyzer({})

    Usage with next-compose-plugins

    From version 2.0.0 of next-compose-plugins you need to call bundle-analyzer in this way to work

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