webpack-bundle-analyser
Analyse Your Webpack Bundles.
Last updated 3 years ago by lmenus .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install webpack-bundle-analyser 
SYNC missed versions from official npm registry.

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

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.

Current Tags

  • 1.4.0                                ...           latest (3 years ago)

9 Versions

  • 1.4.0                                ...           3 years ago
  • 1.3.3                                ...           3 years ago
  • 1.3.2                                ...           3 years ago
  • 1.3.0                                ...           3 years ago
  • 1.2.0                                ...           3 years ago
  • 1.1.3                                ...           3 years ago
  • 1.1.2                                ...           3 years ago
  • 1.1.0                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 3
Last Month 5
Dependencies (18)
Dev Dependencies (6)

Copyright 2014 - 2017 © taobao.org |