webpack-bundle-analyzer 2.8.3 → 2.10.0

package/CHANGELOG.md

@@ -10,6 +10,41 @@
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## UNRELEASED
+
+<!-- Add changelog entries for new changes under this section -->
+
+## 2.10.0
+
+ * **Bug Fix**
+   * Fix "out of memory" crash when dealing with huge stats objects ([#129](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/129), [@ryan953](https://github.com/ryan953))
+
+ * **Internal**
+   * Update dependencies ([#146](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/146))
+   * Update gulp to v4 and simplify gulpfile ([#146](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/146), [#149](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/149))
+   * Simplify ESLint configs ([#148](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/148))
+
+## 2.9.2
+
+ * **Bug Fix**
+   * Add a listener for the 'error' event on the WebSocket server client (#140)
+
+ * **Internal**
+   * Clean up .travis.yml (#140)
+   * Update ws to version 4.0.0 (#140)
+
+## 2.9.1
+
+ * **Bug Fix**
+   * Bump `ws` dependency to fix DoS vulnerability (closes [#130](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/130))
+
+## 2.9.0
+ * **New Feature**
+   * Show chunk sizes in sidebar (closes #91)
+
+ * **Bug Fix**
+   * Properly parse webpack bundles that use arrow functions as module wrappers (#108, @regiontog)
+
 ## 2.8.3
  * **Bug Fix**
    * Correctly advertise port when using a random one (#89, @yannickcr)
@@ -19,7 +54,7 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 ## 2.8.2
  * **Improvement**
    * Greatly improved accuracy of gzip sizes
- 
+
  * **Bug Fix**
    * Generate report file in the bundle output directory when used with Webpack Dev Server (fixes #75)
 
@@ -31,7 +66,7 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
  * **Improvement**
    * Analyzer now supports `webpack --watch` and Webpack Dev Server!
      It will automatically update modules treemap according to changes in the sources via WebSockets!
- 
+
  * **Internal**
    * Use `babel-preset-env` and two different Babel configs to compile node and browser code
    * Update deps
@@ -55,7 +90,7 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 ## 2.4.0
  * **Bug Fix**
    * Fix `TypeError: currentFolder.addModule is not a function`
-  
+
  * **Internal**
    * Update deps
 
@@ -66,7 +101,7 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 ## 2.3.0
  * **Improvement**
    * Add `analyzerHost` option (@freaz)
-  
+
  * **Internal**
    * Update deps
 
@@ -124,37 +159,37 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
    * Workaround `Express` bug that caused wrong `ejs` version to be used as view engine (fixes #17)
 
 ## 1.5.2
- 
+
  * **Bug Fix**
    * Support array module descriptors that can be generated if `DedupePlugin` is used (fixes #4)
 
 ## 1.5.1
- 
+
  * **Internal**
    * Plug analyzer to Webpack compiler `done` event instead of `emit`. Should fix #15.
 
 ## 1.5.0
- 
+
  * **New Feature**
    * Add `statsOptions` option for `BundleAnalyzerPlugin`
 
 ## 1.4.2
- 
+
  * **Bug Fix**
    * Fix "Unable to find bundle asset" error when bundle name starts with `/` (fixes #3)
 
 ## 1.4.1
- 
+
  * **Bug Fix**
    * Add partial support for `DedupePlugin` (see #4 for more info)
 
 ## 1.4.0
- 
+
  * **New Feature**
    * Add "static report" mode (closes #2)
 
 ## 1.3.0
- 
+
  * **Improvement**
    * Add `startAnalyzer` option for `BundleAnalyzerPlugin` (fixes #1)
  * **Internal**

package/LICENSE

@@ -1,6 +1,4 @@
-(The MIT License)
-
-Copyright (c) 2016 Yuriy Grunin <grunin.ya@ya.ru>
+Copyright JS Foundation and other contributors
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

package/README.md

@@ -1,99 +1,134 @@
-# Webpack Bundle Analyzer
-Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
+[![npm][npm]][npm-url]
+[![node][node]][node-url]
+[![deps][deps]][deps-url]
+[![tests][tests]][tests-url]
+[![downloads][downloads]][downloads-url]
+
+<div align="center">
+  <a href="https://github.com/webpack/webpack">
+    <img width="200" height="200"
+      src="https://webpack.js.org/assets/icon-square-big.svg">
+  </a>
+  <h1>Webpack Bundle Analyzer</h1>
+  <p>Visualize size of webpack output files with an interactive zoomable treemap.</p>
+</div>
+
+<h2 align="center">Install</h2>
+
+```bash
+npm install --save-dev webpack-bundle-analyzer
+```
+
+<h2 align="center">Usage (as a plugin)</h2>
+
+```js
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
-[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]
+module.exports = {
+  plugins: [
+    new BundleAnalyzerPlugin()
+  ]
+}
+```
 
-## What is this for?
-Just take a look at this demo:
+It will create an interactive treemap visualization of the contents of all your bundles.
 
 ![webpack bundle analyzer zoomable treemap](https://cloud.githubusercontent.com/assets/302213/20628702/93f72404-b338-11e6-92d4-9a365550a701.gif)
 
 This module will help you:
 
 1. Realize what's *really* inside your bundle
-2. Find out what modules make up the most of it's size
+2. Find out what modules make up the most of its size
 3. Find modules that got there by mistake
 4. Optimize it!
 
 And the best thing is it supports minified bundles! It parses them to get real size of bundled modules.
 And it also shows their gzipped sizes!
 
-## Installation and usage
-There are two ways to use this module:
+<h2 align="center">Options (for plugin)</h2>
 
-### As plugin
-```sh
-npm install --save-dev webpack-bundle-analyzer
-```
-
-In `webpack.config.js`:
 ```js
-var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
-
-// ...
-plugins: [new BundleAnalyzerPlugin()]
-// ...
+new BundleAnalyzerPlugin(options?: object)
 ```
 
-`BundleAnalyzerPlugin` constructor can take an optional configuration object that defaults to this:
+|Name|Type|Description|
+|:--:|:--:|:----------|
+|**`analyzerMode`**|One of: `server`, `static`, `disabled`|Default: `server`. In `server` mode analyzer will start HTTP server to show bundle report. In `static` mode single HTML file with bundle report will be generated. In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`. |
+|**`analyzerHost`**|`{String}`|Default: `127.0.0.1`. Host that will be used in `server` mode to start HTTP server.|
+|**`analyzerPort`**|`{Number}`|Default: `8888`. Port that will be used in `server` mode to start HTTP server.|
+|**`reportFilename`**|`{String}`|Default: `report.html`. Path to bundle report file that will be generated in `static` mode. Relative to bundle output directory (which is `output.path` in webpack config).|
+|**`defaultSizes`**|One of: `stat`, `parsed`, `gzip`|Default: `parsed`. Module sizes to show in report by default. [Size definitions](#size-definitions) section describes what these values mean.|
+|**`openAnalyzer`**|`{Boolean}`|Default: `true`. Automatically open report in default browser.|
+|**`generateStatsFile`**|`{Boolean}`|Default: `false`. If `true`, webpack stats JSON file will be generated in bundle output directory|
+|**`statsFilename`**|`{String}`|Default: `stats.json`. Name of webpack stats JSON file that will be generated if `generateStatsFile` is `true`. Relative to bundle output directory.|
+|**`statsOptions`**|`null` or `{Object}`|Default: `null`. Options for `stats.toJson()` method. For example you can exclude sources of your modules from stats file with `source: false` option. [See more options here](https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21). |
+|**`logLevel`**|One of: `info`, `warn`, `error`, `silent`|Default: `info`. Used to control how much details the plugin outputs.|
 
-```js
-new BundleAnalyzerPlugin({
-  // Can be `server`, `static` or `disabled`.
-  // In `server` mode analyzer will start HTTP server to show bundle report.
-  // In `static` mode single HTML file with bundle report will be generated.
-  // In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
-  analyzerMode: 'server',
-  // Host that will be used in `server` mode to start HTTP server.
-  analyzerHost: '127.0.0.1',
-  // Port that will be used in `server` mode to start HTTP server.
-  analyzerPort: 8888,
-  // Path to bundle report file that will be generated in `static` mode.
-  // Relative to bundles output directory.
-  reportFilename: 'report.html',
-  // Module sizes to show in report by default.
-  // Should be one of `stat`, `parsed` or `gzip`.
-  // See "Definitions" section for more information.
-  defaultSizes: 'parsed',
-  // Automatically open report in default browser
-  openAnalyzer: true,
-  // If `true`, Webpack Stats JSON file will be generated in bundles output directory
-  generateStatsFile: false,
-  // Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
-  // Relative to bundles output directory.
-  statsFilename: 'stats.json',
-  // Options for `stats.toJson()` method.
-  // For example you can exclude sources of your modules from stats file with `source: false` option.
-  // See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
-  statsOptions: null,
-  // Log level. Can be 'info', 'warn', 'error' or 'silent'.
-  logLevel: 'info'
-})
-```
+<h2 align="center">Usage (as a CLI utility)</h2>
 
-### As CLI utility
-You can also analyze already existing bundles if you have Webpack Stats JSON file.
+You can analyze an existing bundle if you have a webpack stats JSON file.
 
 You can generate it using `BundleAnalyzerPlugin` with `generateStatsFile` option set to `true` or with this simple
 command:
 
-```
+```bash
 webpack --profile --json > stats.json
 ```
 
-If you're on Windows and using PowerShell, you can generate the stats file with this command to [avoid BOM issues](https://github.com/th0r/webpack-bundle-analyzer/issues/47):
+If you're on Windows and using PowerShell, you can generate the stats file with this command to [avoid BOM issues](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/47):
 
 ```
 webpack --profile --json | Out-file 'stats.json' -Encoding OEM
 ```
 
-`webpack-bundle-analyzer --help` will show you all usage information.
+Then you can run the CLI tool.
+
+```
+webpack-bundle-analyzer bundle/output/path/stats.json
+```
+
+<h2 align="center">Options (for CLI)</h2>
+
+```bash
+webpack-bundle-analyzer <bundleStatsFile> [bundleDir] [options]
+```
+
+Arguments are documented below:
 
-## Definitions
+### `bundleStatsFile`
 
-webpack-bundle-analyzer reports three values:
+Path to webpack stats JSON file
 
-### Stat size
+### `bundleDir`
+
+Directory containing all generated bundles.
+
+### `options`
+
+```
+  -h, --help                  output usage information
+  -V, --version               output the version number
+  -m, --mode <mode>           Analyzer mode. Should be `server` or `static`.
+                              In `server` mode analyzer will start HTTP server to show bundle report.
+                              In `static` mode single HTML file with bundle report will be generated.
+                              Default is `server`.
+  -h, --host <host>           Host that will be used in `server` mode to start HTTP server.
+                              Default is `127.0.0.1`.
+  -p, --port <n>              Port that will be used in `server` mode to start HTTP server.
+                              Default is 8888.
+  -r, --report <file>         Path to bundle report file that will be generated in `static` mode.
+                              Default is `report.html`.
+  -s, --default-sizes <type>  Module sizes to show in treemap by default.
+                              Possible values: stat, parsed, gzip
+                              Default is `parsed`.
+  -O, --no-open               Don't open report in default browser automatically.
+```
+
+<h2 align="center" id="size-definitions">Size definitions</h2>
+
+webpack-bundle-analyzer reports three values for sizes. `defaultSizes` can be used to control which of these is shown by default. The different reported sizes are:
+
+### `stat`
 
 This is the "input" size of your files, before any transformations like
 minification.
@@ -101,23 +136,60 @@ minification.
 It is called "stat size" because it's obtained from Webpack's
 [stats object](https://webpack.js.org/configuration/stats/).
 
-### Parsed size
+### `parsed`
 
 This is the "output" size of your files. If you're using a Webpack plugin such
 as Uglify, then this value will reflect the minified size of your code.
 
-### Gzip size
+### `gzip`
 
-This is the size of running the file(s) through gzip compression.
+This is the size of running the parsed bundles/modules through gzip compression.
 
-## Contributing
+<h2 align="center">Troubleshooting</h2>
 
-Check out [CONTRIBUTING.md](./CONTRIBUTING.md) for instructions on contributing :tada:
+### I can't see all the dependencies in a chunk
+
+This is a known caveat when `webpack.optimize.ModuleConcatenationPlugin` is used. The way `ModuleConcatenationPlugin` works is that it merges multiple modules into a single one, and so that resulting module doesn't have edges anymore.
 
-## License
+If you are interested to drill down to exact dependencies, try analyzing your bundle without `ModuleConcatenationPlugin`. See [issue #115](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/115) for more discussion.
 
-[MIT](LICENSE)
+<h2 align="center">Maintainers</h2>
 
-[downloads-image]: https://img.shields.io/npm/dt/webpack-bundle-analyzer.svg
-[npm-url]: https://www.npmjs.com/package/webpack-bundle-analyzer
-[npm-image]: https://img.shields.io/npm/v/webpack-bundle-analyzer.svg
+<table>
+  <tbody>
+    <tr>
+      <td align="center">
+        <img width="150" height="150"
+        src="https://avatars3.githubusercontent.com/u/302213?v=4&s=150">
+        </br>
+        <a href="https://github.com/th0r">Yuriy Grunin</a>
+      </td>
+      <td align="center">
+        <img width="150" height="150"
+        src="https://avatars3.githubusercontent.com/u/482561?v=4&s=150">
+        </br>
+        <a href="https://github.com/valscion">Vesa Laakso</a>
+      </td>
+    </tr>
+  <tbody>
+</table>
+
+
+[npm]: https://img.shields.io/npm/v/webpack-bundle-analyzer.svg
+[npm-url]: https://npmjs.com/package/webpack-bundle-analyzer
+
+[node]: https://img.shields.io/node/v/webpack-bundle-analyzer.svg
+[node-url]: https://nodejs.org
+
+[deps]: https://david-dm.org/webpack-contrib/webpack-bundle-analyzer.svg
+[deps-url]: https://david-dm.org/webpack-contrib/webpack-bundle-analyzer
+
+[tests]: http://img.shields.io/travis/webpack-contrib/webpack-bundle-analyzer.svg
+[tests-url]: https://travis-ci.org/webpack-contrib/webpack-bundle-analyzer
+
+[downloads]: https://img.shields.io/npm/dt/webpack-bundle-analyzer.svg
+[downloads-url]: https://npmjs.com/package/webpack-bundle-analyzer
+
+<h2 align="center">Contributing</h2>
+
+Check out [CONTRIBUTING.md](./CONTRIBUTING.md) for instructions on contributing :tada:

package/lib/BundleAnalyzerPlugin.js

@@ -6,7 +6,7 @@ function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, a
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var fs = require('fs');
+var bfj = require('bfj-node4');
 var path = require('path');
 var mkdir = require('mkdirp');
 
@@ -84,19 +84,36 @@ var BundleAnalyzerPlugin = function () {
     }
   }, {
     key: 'generateStatsFile',
-    value: function generateStatsFile(stats) {
-      var statsFilepath = path.resolve(this.compiler.outputPath, this.opts.statsFilename);
+    value: function () {
+      var _ref = _asyncToGenerator(function* (stats) {
+        var statsFilepath = path.resolve(this.compiler.outputPath, this.opts.statsFilename);
+        mkdir.sync(path.dirname(statsFilepath));
+
+        try {
+          yield bfj.write(statsFilepath, stats, {
+            promises: 'ignore',
+            buffers: 'ignore',
+            maps: 'ignore',
+            iterables: 'ignore',
+            circular: 'ignore'
+          });
 
-      mkdir.sync(path.dirname(statsFilepath));
+          this.logger.info(`${bold('Webpack Bundle Analyzer')} saved stats file to ${bold(statsFilepath)}`);
+        } catch (error) {
+          this.logger.error(`${bold('Webpack Bundle Analyzer')} error saving stats file to ${bold(statsFilepath)}: ${error}`);
+        }
+      });
 
-      fs.writeFileSync(statsFilepath, JSON.stringify(stats, null, 2));
+      function generateStatsFile(_x) {
+        return _ref.apply(this, arguments);
+      }
 
-      this.logger.info(`${bold('Webpack Bundle Analyzer')} saved stats file to ${bold(statsFilepath)}`);
-    }
+      return generateStatsFile;
+    }()
   }, {
     key: 'startAnalyzerServer',
     value: function () {
-      var _ref = _asyncToGenerator(function* (stats) {
+      var _ref2 = _asyncToGenerator(function* (stats) {
         if (this.server) {
           (yield this.server).updateChartData(stats);
         } else {
@@ -111,8 +128,8 @@ var BundleAnalyzerPlugin = function () {
         }
       });
 
-      function startAnalyzerServer(_x) {
-        return _ref.apply(this, arguments);
+      function startAnalyzerServer(_x2) {
+        return _ref2.apply(this, arguments);
       }
 
       return startAnalyzerServer;

package/lib/parseUtils.js

@@ -119,7 +119,7 @@ function isArgumentArrayConcatContainingChunks(arg) {
 function isModuleWrapper(node) {
   return (
     // It's an anonymous function expression that wraps module
-    node.type === 'FunctionExpression' && !node.id ||
+    (node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') && !node.id ||
     // If `DedupePlugin` is used it can be an ID of duplicated module...
     isModuleId(node) ||
     // or an array of shape [<module_id>, ...args]

package/lib/viewer.js

@@ -57,6 +57,15 @@ var startServer = function () {
 
     var wss = new WebSocket.Server({ server });
 
+    wss.on('connection', function (ws) {
+      ws.on('error', function (err) {
+        // Ignore network errors like `ECONNRESET`, `EPIPE`, etc.
+        if (err.errno) return;
+
+        logger.info(err.message);
+      });
+    });
+
     return {
       ws: wss,
       http: server,

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "webpack-bundle-analyzer",
-  "version": "2.8.3",
+  "version": "2.10.0",
   "description": "Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap",
   "author": "Yury Grunin <grunin.ya@ya.ru>",
   "license": "MIT",
-  "homepage": "https://github.com/th0r/webpack-bundle-analyzer",
-  "changelog": "https://github.com/th0r/webpack-bundle-analyzer/blob/master/CHANGELOG.md",
+  "homepage": "https://github.com/webpack-contrib/webpack-bundle-analyzer",
+  "changelog": "https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/master/CHANGELOG.md",
   "bugs": {
-    "url": "https://github.com/th0r/webpack-bundle-analyzer/issues"
+    "url": "https://github.com/webpack-contrib/webpack-bundle-analyzer/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/th0r/webpack-bundle-analyzer.git"
+    "url": "git+https://github.com/webpack-contrib/webpack-bundle-analyzer.git"
   },
   "main": "lib/index.js",
   "bin": "lib/bin/analyzer.js",
@@ -23,8 +23,8 @@
     "build": "gulp build",
     "npm-publish": "npm run lint && npm run build && npm test && npm publish",
     "lint": "eslint --ext js,jsx .",
-    "test": "mocha --compilers js:babel-core/register",
-    "test-dev": "mocha --watch --compilers js:babel-core/register"
+    "test": "mocha --exit --require babel-core/register",
+    "test-dev": "mocha --watch --require babel-core/register"
   },
   "files": [
     "public",
@@ -33,47 +33,47 @@
     "views"
   ],
   "dependencies": {
-    "acorn": "^5.1.1",
-    "chalk": "^1.1.3",
-    "commander": "^2.9.0",
-    "ejs": "^2.5.6",
-    "express": "^4.15.2",
-    "filesize": "^3.5.9",
-    "gzip-size": "^3.0.0",
+    "acorn": "^5.3.0",
+    "bfj-node4": "^5.2.0",
+    "chalk": "^2.3.0",
+    "commander": "^2.13.0",
+    "ejs": "^2.5.7",
+    "express": "^4.16.2",
+    "filesize": "^3.5.11",
+    "gzip-size": "^4.1.0",
     "lodash": "^4.17.4",
     "mkdirp": "^0.5.1",
     "opener": "^1.4.3",
-    "ws": "^2.3.1"
+    "ws": "^4.0.0"
   },
   "devDependencies": {
-    "babel-core": "6.24.1",
-    "babel-eslint": "7.2.3",
-    "babel-loader": "7.0.0",
+    "babel-core": "6.26.0",
+    "babel-eslint": "8.2.1",
+    "babel-loader": "7.1.2",
     "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-object-rest-spread": "6.23.0",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-plugin-transform-react-jsx": "6.24.1",
-    "babel-preset-env": "1.4.0",
-    "chai": "3.5.0",
-    "chai-subset": "1.5.0",
+    "babel-preset-env": "1.6.1",
+    "chai": "4.1.2",
+    "chai-subset": "1.6.0",
     "classnames": "2.2.5",
-    "css-loader": "0.28.1",
-    "del": "2.2.2",
-    "eslint": "3.19.0",
-    "eslint-plugin-react": "7.0.0",
+    "css-loader": "0.28.9",
+    "del": "3.0.0",
+    "eslint": "4.16.0",
+    "eslint-config-th0r": "1.0.0",
+    "eslint-config-th0r-react": "1.0.0",
+    "eslint-plugin-react": "7.6.1",
     "exports-loader": "0.6.4",
-    "gulp": "3.9.1",
-    "gulp-babel": "6.1.2",
-    "gulp-plumber": "1.1.0",
-    "gulp-util": "3.0.8",
-    "gulp-watch": "4.3.11",
-    "mocha": "3.3.0",
+    "gulp": "4.0.0",
+    "gulp-babel": "7.0.1",
+    "mocha": "5.0.0",
     "nightmare": "2.10.0",
-    "preact": "8.1.0",
-    "sinon": "2.2.0",
+    "preact": "8.2.7",
+    "sinon": "4.2.2",
     "stream-combiner2": "1.1.1",
-    "style-loader": "0.17.0",
-    "webpack": "2.5.1",
-    "webpack-dev-server": "2.4.5"
+    "style-loader": "0.20.1",
+    "webpack": "3.10.0",
+    "webpack-dev-server": "2.11.1"
   },
   "keywords": [
     "webpack",