webpack-chunk-metadata-plugin

A Webpack plugin to generate and embed chunk-level metadata for advanced bundle analysis, runtime inspection, and custom tooling.

Features

• Infers the type of chunk
• Supports treeshaken exports
• Supports gzip size calculation for each module
• Helps in bundle visualization and performance optimization

Installation

npm install --save-dev webpack-chunk-metadata-plugin OR yarn add --dev webpack-chunk-metadata-plugin

Usage

In your Webpack configuration:

1// webpack.config.js or webpack.config.ts
2const { withChunkMetadataPlugin } = require("webpack-chunk-metadata-plugin");
3
4// Assuming config is earlier webpack config.
5const webpackConfig = withChunkMetadataPlugin({ enabled: true })(config);

Example Output

The plugin will generate a file like client.json in your Webpack output directory:

1{
2  "main": {
3    "id": "main",
4    "parsedSize": 1300,
5    "gzipSize": 643,
6    "statSize": 1549,
7    "type": "sync",
8    "modules": [
9      {
10        "label": "./src/index.js",
11        "path": "./src/index.js",
12        "exports": ["default", "foo"],
13        "treeshakenExports": ["foo"],
14        "parsedSize": 1200,
15        "gzipSize": 456,
16        "statSize": 1249
17      }
18    ]
19  }
20}

Development

1git clone https://github.com/shantanu2307/webpack-chunk-metadata-plugin.git
2cd webpack-chunk-metadata-plugin
3npm install
4npm run build

To test locally in a Webpack project, use npm link:

1cd webpack-chunk-metadata-plugin
2npm link
3
4cd ../your-webpack-project
5npm link webpack-chunk-metadata-plugin

License

MIT © Shantanu Goyal