webpack-bundle-analyzer 2.8.1 → 2.9.1

package/CHANGELOG.md

@@ -10,6 +10,31 @@
 
 _Note: Gaps between patch versions are faulty, broken or test releases._
 
+## 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)
+   * Add proper support for `multi` entries (fixes #92, #87)
+   * Support parsing of ESNext features (fixes #94)
+
+## 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)
+
 ## 2.8.1
  * **Improvement**
    * Improve warning message when analyzer client couldn't connect to WebSocket server

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

@@ -81,7 +81,7 @@ command:
 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
@@ -108,14 +108,15 @@ as Uglify, then this value will reflect the minified size of your code.
 
 ### Gzip size
 
-This is the size of running the file(s) through gzip compression. Note that the
-value listed for the entire bundle is correct, but it will be slightly off if
-you look at the gzip value for individual files.
+This is the size of running the file(s) through gzip compression.
 
-This is because of the way gzip works: the more files that are gzipped together,
-the more opportunities there are for things to be compressed. Accordingly, the
-gzip value reported for each individual file will be slightly _larger_ than the
-actual contribution that the file makes to the overall gzipped bundle.
+## Troubleshooting
+
+### 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.
+
+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.
 
 ## Contributing
 

package/lib/BundleAnalyzerPlugin.js

@@ -85,11 +85,7 @@ var BundleAnalyzerPlugin = function () {
   }, {
     key: 'generateStatsFile',
     value: function generateStatsFile(stats) {
-      var statsFilepath = this.opts.statsFilename;
-
-      if (!path.isAbsolute(statsFilepath)) {
-        statsFilepath = path.resolve(this.compiler.outputPath, statsFilepath);
-      }
+      var statsFilepath = path.resolve(this.compiler.outputPath, this.opts.statsFilename);
 
       mkdir.sync(path.dirname(statsFilepath));
 
@@ -126,7 +122,7 @@ var BundleAnalyzerPlugin = function () {
     value: function generateStaticReport(stats) {
       viewer.generateReport(stats, {
         openBrowser: this.opts.openAnalyzer,
-        reportFilename: this.opts.reportFilename,
+        reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename),
         bundleDir: this.getBundleDirFromCompiler(),
         logger: this.logger,
         defaultSizes: this.opts.defaultSizes

package/lib/analyzer.js

@@ -15,6 +15,7 @@ var _require2 = require('../lib/parseUtils'),
     parseBundle = _require2.parseBundle;
 
 var FILENAME_QUERY_REGEXP = /\?.*$/;
+var MULTI_MODULE_REGEXP = /^multi /;
 
 module.exports = {
   getViewerData,
@@ -43,7 +44,6 @@ function getViewerData(bundleStats, bundleDir, opts) {
   });
 
   // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided
-  var parsedModuleSizes = null;
   var bundlesSources = null;
   var parsedModules = null;
 
@@ -68,15 +68,15 @@ function getViewerData(bundleStats, bundleDir, opts) {
           bundleInfo = null;
         }
 
-        if (bundleInfo) {
-          bundlesSources[statAsset.name] = bundleInfo.src;
-          _.assign(parsedModules, bundleInfo.modules);
-        } else {
+        if (!bundleInfo) {
           logger.warn(`\nCouldn't parse bundle asset "${assetFile}".\n` + 'Analyzer will use module sizes from stats file.\n');
           parsedModules = null;
           bundlesSources = null;
           break;
         }
+
+        bundlesSources[statAsset.name] = bundleInfo.src;
+        _.assign(parsedModules, bundleInfo.modules);
       }
     } catch (err) {
       _didIteratorError = true;
@@ -92,15 +92,6 @@ function getViewerData(bundleStats, bundleDir, opts) {
         }
       }
     }
-
-    if (parsedModules) {
-      parsedModuleSizes = _.mapValues(parsedModules, function (moduleSrc) {
-        return {
-          raw: moduleSrc.length,
-          gzip: gzipSize.sync(moduleSrc)
-        };
-      });
-    }
   }
 
   var assets = _.transform(bundleStats.assets, function (result, statAsset) {
@@ -115,9 +106,8 @@ function getViewerData(bundleStats, bundleDir, opts) {
     asset.modules = _(bundleStats.modules).filter(function (statModule) {
       return assetHasModule(statAsset, statModule);
     }).each(function (statModule) {
-      if (parsedModuleSizes) {
-        statModule.parsedSize = parsedModuleSizes[statModule.id].raw;
-        statModule.gzipSize = parsedModuleSizes[statModule.id].gzip;
+      if (parsedModules) {
+        statModule.parsedSrc = parsedModules[statModule.id];
       }
     });
 
@@ -152,7 +142,7 @@ function createModulesTree(modules) {
   var root = new Folder('.');
 
   _.each(modules, function (module) {
-    var path = getModulePath(module.name);
+    var path = getModulePath(module);
 
     if (path) {
       root.addModuleByPath(path, module);
@@ -162,10 +152,14 @@ function createModulesTree(modules) {
   return root;
 }
 
-function getModulePath(path) {
+function getModulePath(module) {
+  if (MULTI_MODULE_REGEXP.test(module.identifier)) {
+    return [module.identifier];
+  }
+
   var parsedPath = _
   // Removing loaders from module path: they're joined by `!` and the last part is a raw module path
-  .last(path.split('!'))
+  .last(module.name.split('!'))
   // Splitting module path into parts
   .split('/')
   // Removing first `.`

package/lib/parseUtils.js

@@ -10,9 +10,14 @@ module.exports = {
 };
 
 function parseBundle(bundlePath) {
-  var contentBuffer = fs.readFileSync(bundlePath);
-  var contentStr = contentBuffer.toString('utf8');
-  var ast = acorn.parse(contentStr, { sourceType: 'script' });
+  var content = fs.readFileSync(bundlePath, 'utf8');
+  var ast = acorn.parse(content, {
+    sourceType: 'script',
+    // I believe in a bright future of ECMAScript!
+    // Actually, it's set to `2050` to support the latest ECMAScript version that currently exists.
+    // Seems like `acorn` supports such weird option value.
+    ecmaVersion: 2050
+  });
 
   var walkState = {
     locations: null
@@ -63,9 +68,9 @@ function parseBundle(bundlePath) {
   }
 
   return {
-    src: contentStr,
+    src: content,
     modules: _.mapValues(walkState.locations, function (loc) {
-      return contentBuffer.toString('utf8', loc.start, loc.end);
+      return content.slice(loc.start, loc.end);
     })
   };
 }
@@ -114,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]
@@ -171,9 +176,5 @@ function getModulesLocationFromArrayConcat(arg) {
 }
 
 function getModuleLocation(node) {
-  if (node.type === 'FunctionExpression') {
-    node = node.body;
-  }
-
   return _.pick(node, 'start', 'end');
 }

package/lib/tree.js

@@ -12,6 +12,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 
 var _ = require('lodash');
 var filesize = require('filesize');
+var gzipSize = require('gzip-size');
 
 var Node = function () {
   function Node(name, parent) {
@@ -61,13 +62,13 @@ var Module = function (_Node) {
   _createClass(Module, [{
     key: 'mergeData',
     value: function mergeData(data) {
-      var _this2 = this;
+      if (data.size) {
+        this.size += data.size;
+      }
 
-      _.each(['size', 'parsedSize', 'gzipSize'], function (prop) {
-        if (data[prop]) {
-          _this2.data[prop] = (_this2.data[prop] || 0) + data[prop];
-        }
-      });
+      if (data.parsedSrc) {
+        this.src = (this.src || '') + data.parsedSrc;
+      }
     }
   }, {
     key: 'toString',
@@ -86,20 +87,36 @@ var Module = function (_Node) {
         gzipSize: this.gzipSize
       };
     }
+  }, {
+    key: 'src',
+    get: function get() {
+      return this.data.parsedSrc;
+    },
+    set: function set(value) {
+      this.data.parsedSrc = value;
+      delete this._gzipSize;
+    }
   }, {
     key: 'size',
     get: function get() {
       return this.data.size;
+    },
+    set: function set(value) {
+      this.data.size = value;
     }
   }, {
     key: 'parsedSize',
     get: function get() {
-      return this.data.parsedSize;
+      return this.src ? this.src.length : undefined;
     }
   }, {
     key: 'gzipSize',
     get: function get() {
-      return this.data.gzipSize;
+      if (!_.has(this, '_gzipSize')) {
+        this._gzipSize = this.src ? gzipSize.sync(this.src) : undefined;
+      }
+
+      return this._gzipSize;
     }
   }]);
 
@@ -112,10 +129,10 @@ var Folder = function (_Node2) {
   function Folder(name, parent) {
     _classCallCheck(this, Folder);
 
-    var _this3 = _possibleConstructorReturn(this, (Folder.__proto__ || Object.getPrototypeOf(Folder)).call(this, name, parent));
+    var _this2 = _possibleConstructorReturn(this, (Folder.__proto__ || Object.getPrototypeOf(Folder)).call(this, name, parent));
 
-    _this3.children = Object.create(null);
-    return _this3;
+    _this2.children = Object.create(null);
+    return _this2;
   }
 
   _createClass(Folder, [{
@@ -130,7 +147,7 @@ var Folder = function (_Node2) {
 
       this.children[name] = folder;
       delete this._size;
-      delete this._parsedSize;
+      delete this._src;
 
       return folder;
     }
@@ -153,7 +170,7 @@ var Folder = function (_Node2) {
       }
 
       delete this._size;
-      delete this._parsedSize;
+      delete this._src;
 
       return true;
     }
@@ -189,11 +206,12 @@ var Folder = function (_Node2) {
     key: 'walk',
     value: function walk(walker) {
       var state = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var deep = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
 
       var stopped = false;
 
       _.each(this.children, function (child) {
-        if (child.walk) {
+        if (deep && child.walk) {
           state = child.walk(walker, state, stop);
         } else {
           state = walker(child, state, stop);
@@ -237,13 +255,25 @@ var Folder = function (_Node2) {
         groups: _.invokeMap(this.children, 'toChartData')
       };
     }
+  }, {
+    key: 'src',
+    get: function get() {
+      if (!_.has(this, '_src')) {
+        this._src = this.walk(function (node, src, stop) {
+          if (node.src === undefined) return stop(undefined);
+          return src += node.src;
+        }, '', false);
+      }
+
+      return this._src;
+    }
   }, {
     key: 'size',
     get: function get() {
       if (!_.has(this, '_size')) {
         this._size = this.walk(function (node, size) {
           return size + node.size;
-        }, 0);
+        }, 0, false);
       }
 
       return this._size;
@@ -251,29 +281,13 @@ var Folder = function (_Node2) {
   }, {
     key: 'parsedSize',
     get: function get() {
-      if (!_.has(this, '_parsedSize')) {
-        this._parsedSize = this.walk(function (node, size, stop) {
-          if (node.parsedSize === undefined) {
-            return stop(undefined);
-          }
-
-          return size + node.parsedSize;
-        }, 0);
-      }
-
-      return this._parsedSize;
+      return this.src ? this.src.length : undefined;
     }
   }, {
     key: 'gzipSize',
     get: function get() {
       if (!_.has(this, '_gzipSize')) {
-        this._gzipSize = this.walk(function (node, size, stop) {
-          if (node.gzipSize === undefined) {
-            return stop(undefined);
-          }
-
-          return size + node.gzipSize;
-        }, 0);
+        this._gzipSize = this.src ? gzipSize.sync(this.src) : undefined;
       }
 
       return this._gzipSize;

package/lib/viewer.js

@@ -45,7 +45,7 @@ var startServer = function () {
       server.listen(port, host, function () {
         resolve();
 
-        var url = `http://${host}:${port}`;
+        var url = `http://${host}:${server.address().port}`;
 
         logger.info(`${bold('Webpack Bundle Analyzer')} is started at ${bold(url)}\n` + `Use ${bold('Ctrl+C')} to close it`);
 
@@ -139,11 +139,7 @@ function generateReport(bundleStats, opts) {
   }, function (err, reportHtml) {
     if (err) return logger.error(err);
 
-    var reportFilepath = reportFilename;
-
-    if (!path.isAbsolute(reportFilepath)) {
-      reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilepath);
-    }
+    var reportFilepath = path.resolve(bundleDir || process.cwd(), reportFilename);
 
     mkdir.sync(path.dirname(reportFilepath));
     fs.writeFileSync(reportFilepath, reportHtml);

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "webpack-bundle-analyzer",
-  "version": "2.8.1",
+  "version": "2.9.1",
   "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",
@@ -33,7 +33,7 @@
     "views"
   ],
   "dependencies": {
-    "acorn": "^5.0.3",
+    "acorn": "^5.1.1",
     "chalk": "^1.1.3",
     "commander": "^2.9.0",
     "ejs": "^2.5.6",
@@ -43,7 +43,7 @@
     "lodash": "^4.17.4",
     "mkdirp": "^0.5.1",
     "opener": "^1.4.3",
-    "ws": "^2.3.1"
+    "ws": "^3.3.1"
   },
   "devDependencies": {
     "babel-core": "6.24.1",
@@ -72,7 +72,8 @@
     "sinon": "2.2.0",
     "stream-combiner2": "1.1.1",
     "style-loader": "0.17.0",
-    "webpack": "2.5.1"
+    "webpack": "2.5.1",
+    "webpack-dev-server": "2.4.5"
   },
   "keywords": [
     "webpack",