https://github.com/microsoft/webpack-bundle-compare

A tool for comparing webpack bundle stats
https://github.com/microsoft/webpack-bundle-compare

webpack

Last synced: 21 days ago
JSON representation

A tool for comparing webpack bundle stats

• Host: GitHub
• URL: https://github.com/microsoft/webpack-bundle-compare
• Owner: microsoft
• License: mit
• Created: 2019-05-31T14:26:07.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-06T07:37:04.000Z (over 1 year ago)
• Last Synced: 2024-12-30T04:52:33.952Z (25 days ago)
• Topics: webpack
• Language: TypeScript
• Homepage: https://happy-water-0887b0b1e.azurestaticapps.net/#/
• Size: 2.23 MB
• Stars: 158
• Watchers: 7
• Forks: 18
• Open Issues: 21
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# @mixer/webpack-bundle-compare

This is a tool that allows you to compare webpack bundle analysis files over time. Check it out [here](https://happy-water-0887b0b1e.azurestaticapps.net).

![](./screenshot.png)

## Usage

The bundle comparison tool takes URLs of webpack stat outputs and displays them. You can use the JSON output from the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer), but we also include a plugin here if you don't use that package.

### Using the Plugin

First, install the plugin.

```

npm install --save-dev @mixer/webpack-bundle-compare

```

Then, add it to your webpack.config.js file.

```diff

+const { BundleComparisonPlugin } = require('@mixer/webpack-bundle-compare');

...

   plugins: [

+    new BundleComparisonPlugin()

   ]

```

By default, this'll output a file named `stats.msp.gz` in your build output. This is a gzipped msgpack file--for large projects webpack bundle stats can get pretty big and slow down your build, so we try to make it fast. You can configure the output format and filename by passing options to the plugin:

```js

new BundleComparisonPlugin({

  // File to create, relative to the webpack build output path:

  file: 'myStatsFile.msp.gz',

  // Format to output, "msgpack" by default:

  format: 'msgpack' | 'json',

  // Whether to gzip the output, defaults to true:

  gzip: true | false,

})

```

Once you have this file, you can upload it somewhere such as Azure blob storage, and serve it in the tool. The module exposes a convenient way to get a direct preloaded link in the tool:

```js

const { getComparisonAddress } = require('@mixer/webpack-bundle-compare');

const link = getComparisonAddress([

  'http://example.com/stats1.msp.gz',

  'http://example.com/stats1.msp.gz',

])

console.log('See your comparison at:', link);

```

## Contributing

### Architecture

It's a React/Redux app. We pull webpack analysis JSON down from URLs, process them, and output UI. State is driven via Redux, and the parsing and unzipping of the (potentially very large) webpack stat files happen in a webworker. Actions sent in the redux state are mirrored to the webworker, and in turn the webworker and send actions which get fired back to the host application. The work we do atop the stats file is not particularly interesting--an assortment of parsing, walking, and graph generation functions.

### Iteration

To develop against the UI:

1. Create a folder called "public/samples", and place JSON files in there. Or use the ones we already have preloaded.

2. Set the `WBC_FILES` environment variable to a comma-delimited list of the filenames you placed in there.

3. Running the webpack dev server via `npm start` will now serve the files you have placed in there.