Webpack Bundle Analyser

Webpack Bundle Analyser does exactly what it sounds like – analyses your Webpack output bundle. This project was forked from the Webpack analyse website. What's different with Webpack Bundle Analyser is that it allows you to run locally or as a part of CI build. This is particularly useful if you want to automate bundle reporting. We've also added a new façade to the UI and upgraded our tooling to use the latest goodies. 🕹

Table of Contents

• Todo
• Installation
• Usage
  • Prerequisites
  • Script
• Original Boilerplate README

Todo

This package is not completed. Remaining tasks:

• add option to open browser after compiling
• better error handling
• improve graph viewing (chunks murders perf, add 3D viewing)

Installation

We use Yarn for package management, although npm will work just as fine. Once you have one of these installed, you can add Webpack Bundle Analyser to your project with the following command.

$ yarn add webpack-bundle-analyser

And we're done!

Usage

Prerequisites

To use Webpack Bundle Analyser, we need to generate the data to be analysed. This is done during your Webpack build process and there are many ways to create this file, but the most basic approach is by running webpack --profile --json > data.json. This will output the generated file in your current working directory named as data.json.

Another method would be using a plugin, e.g. webpack-bundle-analyzer and including this in your Webpack config file.

module.exports = {
 
  // ...config
 
  plugins: [
    new BundleAnalyzerPlugin({
      generateStatsFile: true,
      statsFilename: 'data.json',
    }),
  ],
};

Script

After we've generated our data, we can add a new script to our package.json file.

"scripts": {
  "webpack-bundle-analyser": "webpack-analyse build -o dist -d data.json"
},

This command tells Webpack Bundle Analyser to generate the website from data.json into dist/ folder. This directory can be then served locally or deployed to your servers as a part of CI build.

Now we can execute Webpack Bundle Analyser by running yarn webpack-bundle-analyser.

Original Boilerplate README

This project has been forked from Webpack analyse.