webpack-bundle-analyzer 2.13.1 → 3.0.2

package/CHANGELOG.md

@@ -14,6 +14,40 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 <!-- Add changelog entries for new changes under this section -->
 
+## 3.0.2
+
+ * **Improvements**
+   * Drop `@babel/runtime` dependency ([#209](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/209), [@realityking](https://github.com/realityking))
+   * Properly specify minimal Node.js version in `.babelrc` ([#209](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/209), [@realityking](https://github.com/realityking))
+
+ * **Bug Fix**
+   * Move some "dependencies" to "devDependencies" ([#209](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/209), [@realityking](https://github.com/realityking))
+
+## 3.0.1
+
+ * **Bug Fix**
+   * Small UI fixes
+
+## 3.0.0
+
+ * **Breaking change**
+   * Dropped support for Node.js v4. Minimal required version now is v6.14.4
+   * Contents of concatenated modules are now hidden by default because of a number of related issues ([details](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/188)), but can be shown using a new checkbox in the sidebar.
+
+ * **New Feature**
+   * Added modules search
+   * Added ability to pin and resize the sidebar
+   * Added button to toggle the sidebar
+   * Added checkbox to show/hide contents of concatenated modules
+
+ * **Improvements**
+   * Nested folders that contain only one child folder are now visually merged i.e. `folder1 => folder2 => file1` is now shown like `folder1/folder2 => file1` (thanks to [@varun-singh-1](https://github.com/varun-singh-1) for the idea)
+   
+ * **Internal**
+   * Dropped support for Node.js v4
+   * Using MobX for state management
+   * Updated dependencies
+
 ## 2.13.1
 
  * **Improvement**

package/README.md

@@ -61,7 +61,7 @@ new BundleAnalyzerPlugin(options?: object)
 |**`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). |
+|**`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://webpack.js.org/configuration/stats/). |
 |**`excludeAssets`**|`{null\|pattern\|pattern[]}` where `pattern` equals to `{String\|RegExp\|function}`|Default: `null`. Patterns that will be used to match against asset names to exclude them from the report. If pattern is a string it will be converted to RegExp via `new RegExp(str)`. If pattern is a function it should have the following signature `(assetName: string) => boolean` and should return `true` to *exclude* matching asset. If multiple patterns are provided asset should match at least one of them to be excluded. |
 |**`logLevel`**|One of: `info`, `warn`, `error`, `silent`|Default: `info`. Used to control how much details the plugin outputs.|
 

package/lib/BundleAnalyzerPlugin.js

@@ -1,26 +1,30 @@
-'use strict';
+"use strict";
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
-function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
 
-var bfj = require('bfj-node4');
-var path = require('path');
-var mkdir = require('mkdirp');
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var _require = require('chalk'),
-    bold = _require.bold;
+const bfj = require('bfj');
 
-var Logger = require('./Logger');
-var viewer = require('./viewer');
+const path = require('path');
 
-var BundleAnalyzerPlugin = function () {
-  function BundleAnalyzerPlugin(opts) {
-    _classCallCheck(this, BundleAnalyzerPlugin);
+const mkdir = require('mkdirp');
 
-    this.opts = Object.assign({
+const {
+  bold
+} = require('chalk');
+
+const Logger = require('./Logger');
+
+const viewer = require('./viewer');
+
+class BundleAnalyzerPlugin {
+  constructor(opts) {
+    this.opts = _objectSpread({
       analyzerMode: 'server',
       analyzerHost: '127.0.0.1',
       analyzerPort: 8888,
@@ -35,134 +39,106 @@ var BundleAnalyzerPlugin = function () {
       // deprecated
       startAnalyzer: true
     }, opts);
-
     this.server = null;
     this.logger = new Logger(this.opts.logLevel);
   }
 
-  _createClass(BundleAnalyzerPlugin, [{
-    key: 'apply',
-    value: function apply(compiler) {
-      var _this = this;
-
-      this.compiler = compiler;
-
-      var done = function done(stats) {
-        stats = stats.toJson(_this.opts.statsOptions);
-
-        var actions = [];
-
-        if (_this.opts.generateStatsFile) {
-          actions.push(function () {
-            return _this.generateStatsFile(stats);
-          });
-        }
-
-        // Handling deprecated `startAnalyzer` flag
-        if (_this.opts.analyzerMode === 'server' && !_this.opts.startAnalyzer) {
-          _this.opts.analyzerMode = 'disabled';
-        }
-
-        if (_this.opts.analyzerMode === 'server') {
-          actions.push(function () {
-            return _this.startAnalyzerServer(stats);
-          });
-        } else if (_this.opts.analyzerMode === 'static') {
-          actions.push(function () {
-            return _this.generateStaticReport(stats);
-          });
-        }
-
-        if (actions.length) {
-          // Making analyzer logs to be after all webpack logs in the console
-          setImmediate(function () {
-            actions.forEach(function (action) {
-              return action();
-            });
-          });
-        }
-      };
-
-      if (compiler.hooks) {
-        compiler.hooks.done.tap('webpack-bundle-analyzer', done);
-      } else {
-        compiler.plugin('done', done);
+  apply(compiler) {
+    this.compiler = compiler;
+
+    const done = stats => {
+      stats = stats.toJson(this.opts.statsOptions);
+      const actions = [];
+
+      if (this.opts.generateStatsFile) {
+        actions.push(() => this.generateStatsFile(stats));
+      } // Handling deprecated `startAnalyzer` flag
+
+
+      if (this.opts.analyzerMode === 'server' && !this.opts.startAnalyzer) {
+        this.opts.analyzerMode = 'disabled';
       }
-    }
-  }, {
-    key: 'generateStatsFile',
-    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, {
-            space: 2,
-            promises: 'ignore',
-            buffers: 'ignore',
-            maps: 'ignore',
-            iterables: 'ignore',
-            circular: 'ignore'
-          });
-
-          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}`);
-        }
-      });
-
-      function generateStatsFile(_x) {
-        return _ref.apply(this, arguments);
+
+      if (this.opts.analyzerMode === 'server') {
+        actions.push(() => this.startAnalyzerServer(stats));
+      } else if (this.opts.analyzerMode === 'static') {
+        actions.push(() => this.generateStaticReport(stats));
       }
 
-      return generateStatsFile;
-    }()
-  }, {
-    key: 'startAnalyzerServer',
-    value: function () {
-      var _ref2 = _asyncToGenerator(function* (stats) {
-        if (this.server) {
-          (yield this.server).updateChartData(stats);
-        } else {
-          this.server = viewer.startServer(stats, {
-            openBrowser: this.opts.openAnalyzer,
-            host: this.opts.analyzerHost,
-            port: this.opts.analyzerPort,
-            bundleDir: this.getBundleDirFromCompiler(),
-            logger: this.logger,
-            defaultSizes: this.opts.defaultSizes,
-            excludeAssets: this.opts.excludeAssets
-          });
-        }
-      });
-
-      function startAnalyzerServer(_x2) {
-        return _ref2.apply(this, arguments);
+      if (actions.length) {
+        // Making analyzer logs to be after all webpack logs in the console
+        setImmediate(() => {
+          actions.forEach(action => action());
+        });
       }
+    };
 
-      return startAnalyzerServer;
-    }()
-  }, {
-    key: 'generateStaticReport',
-    value: function generateStaticReport(stats) {
-      viewer.generateReport(stats, {
-        openBrowser: this.opts.openAnalyzer,
-        reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename),
-        bundleDir: this.getBundleDirFromCompiler(),
-        logger: this.logger,
-        defaultSizes: this.opts.defaultSizes,
-        excludeAssets: this.opts.excludeAssets
-      });
-    }
-  }, {
-    key: 'getBundleDirFromCompiler',
-    value: function getBundleDirFromCompiler() {
-      return this.compiler.outputFileSystem.constructor.name === 'MemoryFileSystem' ? null : this.compiler.outputPath;
+    if (compiler.hooks) {
+      compiler.hooks.done.tap('webpack-bundle-analyzer', done);
+    } else {
+      compiler.plugin('done', done);
     }
-  }]);
+  }
+
+  generateStatsFile(stats) {
+    var _this = this;
+
+    return _asyncToGenerator(function* () {
+      const statsFilepath = path.resolve(_this.compiler.outputPath, _this.opts.statsFilename);
+      mkdir.sync(path.dirname(statsFilepath));
+
+      try {
+        yield bfj.write(statsFilepath, stats, {
+          space: 2,
+          promises: 'ignore',
+          buffers: 'ignore',
+          maps: 'ignore',
+          iterables: 'ignore',
+          circular: 'ignore'
+        });
+
+        _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}`);
+      }
+    })();
+  }
+
+  startAnalyzerServer(stats) {
+    var _this2 = this;
+
+    return _asyncToGenerator(function* () {
+      if (_this2.server) {
+        (yield _this2.server).updateChartData(stats);
+      } else {
+        _this2.server = viewer.startServer(stats, {
+          openBrowser: _this2.opts.openAnalyzer,
+          host: _this2.opts.analyzerHost,
+          port: _this2.opts.analyzerPort,
+          bundleDir: _this2.getBundleDirFromCompiler(),
+          logger: _this2.logger,
+          defaultSizes: _this2.opts.defaultSizes,
+          excludeAssets: _this2.opts.excludeAssets
+        });
+      }
+    })();
+  }
+
+  generateStaticReport(stats) {
+    viewer.generateReport(stats, {
+      openBrowser: this.opts.openAnalyzer,
+      reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename),
+      bundleDir: this.getBundleDirFromCompiler(),
+      logger: this.logger,
+      defaultSizes: this.opts.defaultSizes,
+      excludeAssets: this.opts.excludeAssets
+    });
+  }
+
+  getBundleDirFromCompiler() {
+    return this.compiler.outputFileSystem.constructor.name === 'MemoryFileSystem' ? null : this.compiler.outputPath;
+  }
 
-  return BundleAnalyzerPlugin;
-}();
+}
 
 module.exports = BundleAnalyzerPlugin;

package/lib/Logger.js

@@ -1,94 +1,38 @@
-'use strict';
+"use strict";
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var LEVELS = ['debug', 'info', 'warn', 'error', 'silent'];
-
-var LEVEL_TO_CONSOLE_METHOD = new Map([['debug', 'log'], ['info', 'log'], ['warn', 'log']]);
-
-var Logger = function () {
-  function Logger() {
-    var level = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Logger.defaultLevel;
-
-    _classCallCheck(this, Logger);
+const LEVELS = ['debug', 'info', 'warn', 'error', 'silent'];
+const LEVEL_TO_CONSOLE_METHOD = new Map([['debug', 'log'], ['info', 'log'], ['warn', 'log']]);
 
+class Logger {
+  constructor(level = Logger.defaultLevel) {
     this.activeLevels = new Set();
     this.setLogLevel(level);
   }
 
-  _createClass(Logger, [{
-    key: 'setLogLevel',
-    value: function setLogLevel(level) {
-      var levelIndex = LEVELS.indexOf(level);
-
-      if (levelIndex === -1) throw new Error(`Invalid log level "${level}". Use one of these: ${LEVELS.join(', ')}`);
-
-      this.activeLevels.clear();
-
-      var _iteratorNormalCompletion = true;
-      var _didIteratorError = false;
-      var _iteratorError = undefined;
-
-      try {
-        for (var _iterator = LEVELS.entries()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-          var _ref = _step.value;
+  setLogLevel(level) {
+    const levelIndex = LEVELS.indexOf(level);
+    if (levelIndex === -1) throw new Error(`Invalid log level "${level}". Use one of these: ${LEVELS.join(', ')}`);
+    this.activeLevels.clear();
 
-          var _ref2 = _slicedToArray(_ref, 2);
-
-          var i = _ref2[0];
-          var _level = _ref2[1];
-
-          if (i >= levelIndex) this.activeLevels.add(_level);
-        }
-      } catch (err) {
-        _didIteratorError = true;
-        _iteratorError = err;
-      } finally {
-        try {
-          if (!_iteratorNormalCompletion && _iterator.return) {
-            _iterator.return();
-          }
-        } finally {
-          if (_didIteratorError) {
-            throw _iteratorError;
-          }
-        }
-      }
+    for (const [i, level] of LEVELS.entries()) {
+      if (i >= levelIndex) this.activeLevels.add(level);
     }
-  }, {
-    key: '_log',
-    value: function _log(level) {
-      var _console;
-
-      for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
-      }
+  }
 
-      (_console = console)[LEVEL_TO_CONSOLE_METHOD.get(level) || level].apply(_console, args);
-    }
-  }]);
+  _log(level, ...args) {
+    console[LEVEL_TO_CONSOLE_METHOD.get(level) || level](...args);
+  }
 
-  return Logger;
-}();
+}
 
 Logger.levels = LEVELS;
 Logger.defaultLevel = 'info';
 ;
-
-LEVELS.forEach(function (level) {
+LEVELS.forEach(level => {
   if (level === 'silent') return;
 
-  Logger.prototype[level] = function () {
-    for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-
-    if (this.activeLevels.has(level)) this._log.apply(this, [level].concat(args));
+  Logger.prototype[level] = function (...args) {
+    if (this.activeLevels.has(level)) this._log(level, ...args);
   };
 });
-
 module.exports = Logger;

package/lib/analyzer.js

@@ -1,93 +1,72 @@
-'use strict';
+"use strict";
 
-var fs = require('fs');
-var path = require('path');
+const fs = require('fs');
 
-var _ = require('lodash');
-var gzipSize = require('gzip-size');
+const path = require('path');
 
-var Logger = require('./Logger');
-var Folder = require('./tree/Folder').default;
+const _ = require('lodash');
 
-var _require = require('./parseUtils'),
-    parseBundle = _require.parseBundle;
+const gzipSize = require('gzip-size');
 
-var _require2 = require('./utils'),
-    createAssetsFilter = _require2.createAssetsFilter;
+const Logger = require('./Logger');
 
-var FILENAME_QUERY_REGEXP = /\?.*$/;
+const Folder = require('./tree/Folder').default;
 
+const {
+  parseBundle
+} = require('./parseUtils');
+
+const {
+  createAssetsFilter
+} = require('./utils');
+
+const FILENAME_QUERY_REGEXP = /\?.*$/;
 module.exports = {
   getViewerData,
   readStatsFromFile
 };
 
 function getViewerData(bundleStats, bundleDir, opts) {
-  var _ref = opts || {},
-      _ref$logger = _ref.logger,
-      logger = _ref$logger === undefined ? new Logger() : _ref$logger,
-      _ref$excludeAssets = _ref.excludeAssets,
-      excludeAssets = _ref$excludeAssets === undefined ? null : _ref$excludeAssets;
+  const {
+    logger = new Logger(),
+    excludeAssets = null
+  } = opts || {};
+  const isAssetIncluded = createAssetsFilter(excludeAssets); // Sometimes all the information is located in `children` array (e.g. problem in #10)
 
-  var isAssetIncluded = createAssetsFilter(excludeAssets);
-
-  // Sometimes all the information is located in `children` array (e.g. problem in #10)
   if (_.isEmpty(bundleStats.assets) && !_.isEmpty(bundleStats.children)) {
     bundleStats = bundleStats.children[0];
-  }
+  } // Picking only `*.js` assets from bundle that has non-empty `chunks` array
 
-  // Picking only `*.js` assets from bundle that has non-empty `chunks` array
-  bundleStats.assets = _.filter(bundleStats.assets, function (asset) {
+
+  bundleStats.assets = _.filter(bundleStats.assets, asset => {
     // Removing query part from filename (yes, somebody uses it for some reason and Webpack supports it)
     // See #22
     asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, '');
-
     return _.endsWith(asset.name, '.js') && !_.isEmpty(asset.chunks) && isAssetIncluded(asset.name);
-  });
+  }); // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided
 
-  // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided
-  var bundlesSources = null;
-  var parsedModules = null;
+  let bundlesSources = null;
+  let parsedModules = null;
 
   if (bundleDir) {
     bundlesSources = {};
     parsedModules = {};
 
-    var _iteratorNormalCompletion = true;
-    var _didIteratorError = false;
-    var _iteratorError = undefined;
-
-    try {
-      for (var _iterator = bundleStats.assets[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
-        var statAsset = _step.value;
-
-        var assetFile = path.join(bundleDir, statAsset.name);
-        var bundleInfo = void 0;
+    for (const statAsset of bundleStats.assets) {
+      const assetFile = path.join(bundleDir, statAsset.name);
+      let bundleInfo;
 
-        try {
-          bundleInfo = parseBundle(assetFile);
-        } catch (err) {
-          var msg = err.code === 'ENOENT' ? 'no such file' : err.message;
-          logger.warn(`Error parsing bundle asset "${assetFile}": ${msg}`);
-          continue;
-        }
-
-        bundlesSources[statAsset.name] = bundleInfo.src;
-        _.assign(parsedModules, bundleInfo.modules);
-      }
-    } catch (err) {
-      _didIteratorError = true;
-      _iteratorError = err;
-    } finally {
       try {
-        if (!_iteratorNormalCompletion && _iterator.return) {
-          _iterator.return();
-        }
-      } finally {
-        if (_didIteratorError) {
-          throw _iteratorError;
-        }
+        bundleInfo = parseBundle(assetFile);
+      } catch (err) {
+        const msg = err.code === 'ENOENT' ? 'no such file' : err.message;
+        logger.warn(`Error parsing bundle asset "${assetFile}": ${msg}`);
+        continue;
       }
+
+      bundlesSources[statAsset.name] = bundleInfo.src;
+
+      _.assign(parsedModules, bundleInfo.modules);
     }
 
     if (_.isEmpty(bundlesSources)) {
@@ -97,28 +76,26 @@ function getViewerData(bundleStats, bundleDir, opts) {
     }
   }
 
-  var modules = getBundleModules(bundleStats);
-  var assets = _.transform(bundleStats.assets, function (result, statAsset) {
-    var asset = result[statAsset.name] = _.pick(statAsset, 'size');
+  const modules = getBundleModules(bundleStats);
+
+  const assets = _.transform(bundleStats.assets, (result, statAsset) => {
+    const asset = result[statAsset.name] = _.pick(statAsset, 'size');
 
     if (bundlesSources && _.has(bundlesSources, statAsset.name)) {
       asset.parsedSize = bundlesSources[statAsset.name].length;
       asset.gzipSize = gzipSize.sync(bundlesSources[statAsset.name]);
-    }
+    } // Picking modules from current bundle script
 
-    // Picking modules from current bundle script
-    asset.modules = _(modules).filter(function (statModule) {
-      return assetHasModule(statAsset, statModule);
-    }).each(function (statModule) {
+
+    asset.modules = _(modules).filter(statModule => assetHasModule(statAsset, statModule)).each(statModule => {
       if (parsedModules) {
         statModule.parsedSrc = parsedModules[statModule.id];
       }
     });
-
     asset.tree = createModulesTree(asset.modules);
   }, {});
 
-  return _.transform(assets, function (result, asset, filename) {
+  return _.transform(assets, (result, asset, filename) => {
     result.push({
       label: filename,
       // Not using `asset.size` here provided by Webpack because it can be very confusing when `UglifyJsPlugin` is used.
@@ -143,17 +120,14 @@ function getBundleModules(bundleStats) {
 
 function assetHasModule(statAsset, statModule) {
   // Checking if this module is the part of asset chunks
-  return _.some(statModule.chunks, function (moduleChunk) {
-    return _.includes(statAsset.chunks, moduleChunk);
-  });
+  return _.some(statModule.chunks, moduleChunk => _.includes(statAsset.chunks, moduleChunk));
 }
 
 function createModulesTree(modules) {
-  var root = new Folder('.');
+  const root = new Folder('.');
 
-  _.each(modules, function (module) {
-    return root.addModule(module);
-  });
+  _.each(modules, module => root.addModule(module));
 
+  root.mergeNestedFolders();
   return root;
 }