Nibbling Perfect Macaroni

    @next/bundle-analyzer

    12.1.6 • Public • Published

    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 two HTML files (client.html and server.html) will be outputted to <distDir>/analyze/. One will be for the server bundle, one for the browser bundle.

    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
    ])

    Keywords

    none

    Install

    npm i @next/bundle-analyzer

    DownloadsWeekly Downloads

    644,049

    Version

    12.1.6

    License

    MIT

    Unpacked Size

    3.53 kB

    Total Files

    4

    Last publish

    Collaborators

    • matt.straka
    • vercel-release-bot
    • rauchg
    • timneutkens
    • timer