webpack-bundle-analyzer 2.8.1 → 2.9.1

package/src/BundleAnalyzerPlugin.js

@@ -62,11 +62,7 @@ class BundleAnalyzerPlugin {
   }
 
   generateStatsFile(stats) {
-    let statsFilepath = this.opts.statsFilename;
-
-    if (!path.isAbsolute(statsFilepath)) {
-      statsFilepath = path.resolve(this.compiler.outputPath, statsFilepath);
-    }
+    const statsFilepath = path.resolve(this.compiler.outputPath, this.opts.statsFilename);
 
     mkdir.sync(path.dirname(statsFilepath));
 
@@ -98,7 +94,7 @@ class BundleAnalyzerPlugin {
   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/src/analyzer.js

@@ -9,6 +9,7 @@ const { Folder } = require('../lib/tree');
 const { parseBundle } = require('../lib/parseUtils');
 
 const FILENAME_QUERY_REGEXP = /\?.*$/;
+const MULTI_MODULE_REGEXP = /^multi /;
 
 module.exports = {
   getViewerData,
@@ -35,7 +36,6 @@ function getViewerData(bundleStats, bundleDir, opts) {
   });
 
   // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided
-  let parsedModuleSizes = null;
   let bundlesSources = null;
   let parsedModules = null;
 
@@ -53,10 +53,7 @@ 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'
@@ -65,15 +62,9 @@ function getViewerData(bundleStats, bundleDir, opts) {
         bundlesSources = null;
         break;
       }
-    }
 
-    if (parsedModules) {
-      parsedModuleSizes = _.mapValues(parsedModules,
-        moduleSrc => ({
-          raw: moduleSrc.length,
-          gzip: gzipSize.sync(moduleSrc)
-        })
-      );
+      bundlesSources[statAsset.name] = bundleInfo.src;
+      _.assign(parsedModules, bundleInfo.modules);
     }
   }
 
@@ -89,9 +80,8 @@ function getViewerData(bundleStats, bundleDir, opts) {
     asset.modules = _(bundleStats.modules)
       .filter(statModule => assetHasModule(statAsset, statModule))
       .each(statModule => {
-        if (parsedModuleSizes) {
-          statModule.parsedSize = parsedModuleSizes[statModule.id].raw;
-          statModule.gzipSize = parsedModuleSizes[statModule.id].gzip;
+        if (parsedModules) {
+          statModule.parsedSrc = parsedModules[statModule.id];
         }
       });
 
@@ -128,7 +118,7 @@ function createModulesTree(modules) {
   const root = new Folder('.');
 
   _.each(modules, module => {
-    const path = getModulePath(module.name);
+    const path = getModulePath(module);
 
     if (path) {
       root.addModuleByPath(path, module);
@@ -138,10 +128,14 @@ function createModulesTree(modules) {
   return root;
 }
 
-function getModulePath(path) {
+function getModulePath(module) {
+  if (MULTI_MODULE_REGEXP.test(module.identifier)) {
+    return [module.identifier];
+  }
+
   const 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/src/parseUtils.js

@@ -8,9 +8,14 @@ module.exports = {
 };
 
 function parseBundle(bundlePath) {
-  const contentBuffer = fs.readFileSync(bundlePath);
-  const contentStr = contentBuffer.toString('utf8');
-  const ast = acorn.parse(contentStr, { sourceType: 'script' });
+  const content = fs.readFileSync(bundlePath, 'utf8');
+  const 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
+  });
 
   const walkState = {
     locations: null
@@ -78,9 +83,9 @@ function parseBundle(bundlePath) {
   }
 
   return {
-    src: contentStr,
+    src: content,
     modules: _.mapValues(walkState.locations,
-      loc => contentBuffer.toString('utf8', loc.start, loc.end)
+      loc => content.slice(loc.start, loc.end)
     )
   };
 }
@@ -139,7 +144,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]
@@ -196,9 +201,5 @@ function getModulesLocationFromArrayConcat(arg) {
 }
 
 function getModuleLocation(node) {
-  if (node.type === 'FunctionExpression') {
-    node = node.body;
-  }
-
   return _.pick(node, 'start', 'end');
 }

package/src/tree.js

@@ -1,5 +1,6 @@
 const _ = require('lodash');
 const filesize = require('filesize');
+const gzipSize = require('gzip-size');
 
 class Node {
 
@@ -35,24 +36,43 @@ class Module extends Node {
     this.data = data;
   }
 
+  get src() {
+    return this.data.parsedSrc;
+  }
+
+  set src(value) {
+    this.data.parsedSrc = value;
+    delete this._gzipSize;
+  }
+
   get size() {
     return this.data.size;
   }
 
+  set size(value) {
+    this.data.size = value;
+  }
+
   get parsedSize() {
-    return this.data.parsedSize;
+    return this.src ? this.src.length : undefined;
   }
 
   get gzipSize() {
-    return this.data.gzipSize;
+    if (!_.has(this, '_gzipSize')) {
+      this._gzipSize = this.src ? gzipSize.sync(this.src) : undefined;
+    }
+
+    return this._gzipSize;
   }
 
   mergeData(data) {
-    _.each(['size', 'parsedSize', 'gzipSize'], prop => {
-      if (data[prop]) {
-        this.data[prop] = (this.data[prop] || 0) + data[prop];
-      }
-    });
+    if (data.size) {
+      this.size += data.size;
+    }
+
+    if (data.parsedSrc) {
+      this.src = (this.src || '') + data.parsedSrc;
+    }
   }
 
   toString(indent) {
@@ -80,37 +100,32 @@ class Folder extends Node {
     this.children = Object.create(null);
   }
 
+  get src() {
+    if (!_.has(this, '_src')) {
+      this._src = this.walk((node, src, stop) => {
+        if (node.src === undefined) return stop(undefined);
+        return (src += node.src);
+      }, '', false);
+    }
+
+    return this._src;
+  }
+
   get size() {
     if (!_.has(this, '_size')) {
-      this._size = this.walk((node, size) => (size + node.size), 0);
+      this._size = this.walk((node, size) => (size + node.size), 0, false);
     }
 
     return this._size;
   }
 
   get parsedSize() {
-    if (!_.has(this, '_parsedSize')) {
-      this._parsedSize = this.walk((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;
   }
 
   get gzipSize() {
     if (!_.has(this, '_gzipSize')) {
-      this._gzipSize = this.walk((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;
@@ -125,7 +140,7 @@ class Folder extends Node {
 
     this.children[name] = folder;
     delete this._size;
-    delete this._parsedSize;
+    delete this._src;
 
     return folder;
   }
@@ -147,7 +162,7 @@ class Folder extends Node {
     }
 
     delete this._size;
-    delete this._parsedSize;
+    delete this._src;
 
     return true;
   }
@@ -177,11 +192,11 @@ class Folder extends Node {
     currentFolder.addModule(fileName, data);
   }
 
-  walk(walker, state = {}) {
+  walk(walker, state = {}, deep = true) {
     let stopped = false;
 
     _.each(this.children, child => {
-      if (child.walk) {
+      if (deep && child.walk) {
         state = child.walk(walker, state, stop);
       } else {
         state = walker(child, state, stop);

package/src/viewer.js

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