Registry / devops / webpack-split-chunks-analyzer

webpack-split-chunks-analyzer

library0.3.2jsnpmunverified

webpack-split-chunks-analyzer is a webpack plugin (v0.3.2) that helps developers debug how their application is dynamically loaded by webpack, specifically focusing on split chunks behavior. It visualizes and reports chunk splitting decisions, making it easier to understand and optimize bundle splitting. The package requires webpack 5 and Node >=18, ships TypeScript types, and is released on npm with an active development cadence. Key differentiators: provides a dedicated granular view of split chunks rather than generic bundle analysis, supports real-time visualization during development, and integrates directly into the webpack build pipeline.

devops

npm install webpack-split-chunks-analyzer

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · WEBPACK-SPLIT-CHUN

webpack-split-chunks-analyzer

devopsjavascriptv0.3.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

SplitChunksAnalyzerPlugin

✓ import { SplitChunksAnalyzerPlugin } from 'webpack-split-chunks-analyzer'

✗ const SplitChunksAnalyzerPlugin = require('webpack-split-chunks-analyzer')

The package is ESM only; using require() will fail. Also ensure webpack 5 is available.

default import

✓ import SplitChunksAnalyzerPlugin from 'webpack-split-chunks-analyzer'

Default import is available since v0.3.0 and is equivalent to the named import.

Plugin usage in webpack config

✓ const { SplitChunksAnalyzerPlugin } = require('webpack-split-chunks-analyzer'); module.exports = { plugins: [new SplitChunksAnalyzerPlugin()] };

CommonJS require works if you use the CJS build (provided as fallback). The default import and named import both work in ESM context.

Shows how to add the SplitChunksAnalyzerPlugin to a webpack configuration, with optional customization for output file and auto-open behavior.

const { SplitChunksAnalyzerPlugin } = require('webpack-split-chunks-analyzer'); // webpack.config.js module.exports = { // ... other config plugins: [ new SplitChunksAnalyzerPlugin({ // Optional: customize output filename: 'chunks-analyzer.json', // default: 'chunks-analyzer.json' openAnalyzer: true // automatically open report }) ] };

Debug

Known issues

gotchaThe plugin requires webpack 5. Using with webpack 4 will cause errors.

fix

Upgrade webpack to version 5 or later.

affects: >=0.0.0

gotchaPlugin output may be large for projects with many chunks; consider using .gitignore for generated files.

fix

Add 'chunks-analyzer.json' to .gitignore.

affects: >=0.0.0

breakingIn v0.2.x, the plugin used to emit a different output structure. Upgrading to v0.3.0 changes the output format.

fix

If you depend on the specific output format, update your parsing logic. See changelog.

affects: >=0.2.0 <0.3.0

Errors

Common errors & fixes

Error: Cannot find module 'webpack-split-chunks-analyzer'

Package not installed or not in node_modules.

fix

Run: npm install webpack-split-chunks-analyzer --save-dev

TypeError: SplitChunksAnalyzerPlugin is not a constructor

Using wrong import style (e.g., default import as object) or package version mismatch.

fix

Ensure you import correctly: const { SplitChunksAnalyzerPlugin } = require('webpack-split-chunks-analyzer');

Error: webpack.optimize.SplitChunksPlugin is not a function

Misunderstanding: the plugin is not a built-in webpack plugin, it's a separate package.

fix

Install and import from 'webpack-split-chunks-analyzer' instead of referencing webpack.optimize.

Upgrade

Version history

0.3.2latest on npm

Audit

Dependencies

webpackrequiredpeer dependency: required to run as a webpack plugin

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/maclockard/webpack-split-chunks-analyzer ↗

packagewebpack-split-chunks-analyzer ↗

homepagehttps://github.com/maclockard/webpack-split-chunks-analyzer#readme ↗