JSON report from bundle-analyzer

[prescottprue]

Describe the feature you'd like to request

Ability to generate JSON bundle size reports from @next/bundle-analyzer. This is a useful way to write automation to confirm that NextJS bundle sizes haven't grown beyond an expected size. Our team is planning to have checks fail in CI if our bundle are over a certain size - by generating JSON reports from @next/bundle-analyzer we were able to do so. We think this feature would be useful for others.

Describe the solution you'd like

This can be accomplished leveraging webpack-bundle-analyzer's already built in functionality by passing along configuration within @next/bundle-analyzer to webpack-bundle-analyzer.

Describe alternatives you've considered

I was able to do this by passing along analyzerMode from options of @next/bundle-analyzer - below are options which range in configurability and API interface

Just Use webpack-bundle-analyzer directly

If you use webpack-bundle-analyzer instead of @next/bundle-analyzer it is possible to pass your own settings (mirroring how next-bundle-analyzer works). This is cumbersome to repeat across muiltiple NextJS project and pushes devs away from @next/bundle-analyzer

Minimal API Surface

when going this route it is clear that the report file type should be able to switch between HTML and JSON:

usage

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  analyzerMode: 'json',
})
module.exports = withBundleAnalyzer({})

@next/bundle-analyzer

module.exports =
  ({ enabled = true, openAnalyzer = true, analyzerMode = 'json' } = {}) =>
  (nextConfig = {}) => {
    return Object.assign({}, nextConfig, {
      webpack(config, options) {
        if (enabled) {
          const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
          const reportFileType = analyzerMode === 'json' ? 'json' : 'html'
          config.plugins.push(
            new BundleAnalyzerPlugin({
              analyzerMode,
              openAnalyzer,
              reportFilename: options.isServer
                ? `../analyze/server.${reportFileType}`
                : `./analyze/client.${reportFileType}`,
            })
          )
        }

        if (typeof nextConfig.webpack === 'function') {
          return nextConfig.webpack(config, options)
        }
        return config
      },
    })
  }

More Configurable

Exposing ability to set report filenames makes it so that the user can provide path for reports - it is nice to still handle the prefix difference so that the dev doesn't need to be aware of that (so both client and server paths have the same base):

usage

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  analyzerMode: 'json',
  serverReportFilename: 'analyze/server.json',
  clientReportFilename: 'analyze/client.json'
})
module.exports = withBundleAnalyzer({})

@next/bundle-analyzer

module.exports =
  ({
    enabled = true,
    openAnalyzer = true,
    analyzerMode = 'static',
    serverReportFilename,
    clientReportFilename
  } = {}) =>
  (nextConfig = {}) => {
    return Object.assign({}, nextConfig, {
      webpack(config, options) {
        if (enabled) {
          const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
          const reportFileExtension = analyzerMode === 'json' ? 'json' : 'html'
          config.plugins.push(
            new BundleAnalyzerPlugin({
              analyzerMode,
              openAnalyzer,
              reportFilename: options.isServer
                ? `../${serverReportFilename}` || `../analyze/server.${reportFileExtension}`
                : `./${clientReportFilename}` || `./analyze/client.${reportFileExtension}`,
            })
          )
        }

        if (typeof nextConfig.webpack === 'function') {
          return nextConfig.webpack(config, options)
        }
        return config
      },
    })
  }

Most Configurable

Ability to pass a function which generates configuration - this would allow the user to configure webpack-bundle-analyzer however they want. Though this gives the ability to do anything, it almost defeats the purpose of the pre-configuring that @next/bundle-analyzer intends to do since the user needs to set all config

usage

const withBundleAnalyzer = require('@next/bundle-analyzer')((config, options) => ({
  enabled: true,
  analyzerMode: 'json',
  openAnalyzer: true,
  reportFilename: options.isServer
    ? '../analyze/server.html'
    : './analyze/client.html',
}))
module.exports = withBundleAnalyzer({})

@next/bundle-analyzer

module.exports =
  (bundleAnalyzerConfig = {}) =>
  (nextConfig = {}) => {
    return Object.assign({}, nextConfig, {
      webpack(config, options) {
        const analyzerConfig = typeof bundleAnalyzerConfig === 'function'
        ? bundleAnalyzerConfig(config, options)
        : {
          enabled: true,
          openAnalyzer: true,
          analyzerMode: 'static',
          reportFilename: options.isServer
            ? `../analyze/server.html`
            : `./analyze/client.html`
        }
        if (analyzerConfig.enabled) {
          const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
          config.plugins.push(
            new BundleAnalyzerPlugin(analyzerConfig)
          )
        }

        if (typeof nextConfig.webpack === 'function') {
          return nextConfig.webpack(config, options)
        }
        return config
      },
    })
  }

[prescottprue]

As called out here: #40071 (comment) recent change still does not allow for .json extension on output files

[william-will-angi]

Posting this for anyone it may be useful for. I am using a script to pull the data out of the generated html file:

const { readFileSync } = require("fs");
const { JSDOM} = require("jsdom");

const client = readFileSync("./.next/analyze/client.html").toString()
const { window } = new JSDOM(client, { runScripts: 'dangerously'});