webpack-bundle-analyzer 2.11.2 → 2.13.1

package/src/BundleAnalyzerPlugin.js

@@ -19,6 +19,7 @@ class BundleAnalyzerPlugin {
       generateStatsFile: false,
       statsFilename: 'stats.json',
       statsOptions: null,
+      excludeAssets: null,
       logLevel: 'info',
       // deprecated
       startAnalyzer: true,
@@ -73,6 +74,7 @@ class BundleAnalyzerPlugin {
 
     try {
       await bfj.write(statsFilepath, stats, {
+        space: 2,
         promises: 'ignore',
         buffers: 'ignore',
         maps: 'ignore',
@@ -100,7 +102,8 @@ class BundleAnalyzerPlugin {
         port: this.opts.analyzerPort,
         bundleDir: this.getBundleDirFromCompiler(),
         logger: this.logger,
-        defaultSizes: this.opts.defaultSizes
+        defaultSizes: this.opts.defaultSizes,
+        excludeAssets: this.opts.excludeAssets
       });
     }
   }
@@ -111,7 +114,8 @@ class BundleAnalyzerPlugin {
       reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename),
       bundleDir: this.getBundleDirFromCompiler(),
       logger: this.logger,
-      defaultSizes: this.opts.defaultSizes
+      defaultSizes: this.opts.defaultSizes,
+      excludeAssets: this.opts.excludeAssets
     });
   }
 

package/src/analyzer.js

@@ -7,6 +7,7 @@ const gzipSize = require('gzip-size');
 const Logger = require('./Logger');
 const Folder = require('./tree/Folder').default;
 const { parseBundle } = require('./parseUtils');
+const { createAssetsFilter } = require('./utils');
 
 const FILENAME_QUERY_REGEXP = /\?.*$/;
 
@@ -17,9 +18,12 @@ module.exports = {
 
 function getViewerData(bundleStats, bundleDir, opts) {
   const {
-    logger = new Logger()
+    logger = new Logger(),
+    excludeAssets = null
   } = opts || {};
 
+  const 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];
@@ -31,7 +35,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     // See #22
     asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, '');
 
-    return _.endsWith(asset.name, '.js') && !_.isEmpty(asset.chunks);
+    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
@@ -49,29 +53,27 @@ function getViewerData(bundleStats, bundleDir, opts) {
       try {
         bundleInfo = parseBundle(assetFile);
       } catch (err) {
-        bundleInfo = null;
-      }
-
-      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;
+        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)) {
+      bundlesSources = null;
+      parsedModules = null;
+      logger.warn('\nNo bundles were parsed. Analyzer will show only original module sizes from stats file.\n');
+    }
   }
 
   const modules = getBundleModules(bundleStats);
   const assets = _.transform(bundleStats.assets, (result, statAsset) => {
     const asset = result[statAsset.name] = _.pick(statAsset, 'size');
 
-    if (bundlesSources) {
+    if (bundlesSources && _.has(bundlesSources, statAsset.name)) {
       asset.parsedSize = bundlesSources[statAsset.name].length;
       asset.gzipSize = gzipSize.sync(bundlesSources[statAsset.name]);
     }
@@ -94,7 +96,8 @@ function getViewerData(bundleStats, bundleDir, opts) {
       // Not using `asset.size` here provided by Webpack because it can be very confusing when `UglifyJsPlugin` is used.
       // In this case all module sizes from stats file will represent unminified module sizes, but `asset.size` will
       // be the size of minified bundle.
-      statSize: asset.tree.size,
+      // Using `asset.size` only if current asset doesn't contain any modules (resulting size equals 0)
+      statSize: asset.tree.size || asset.size,
       parsedSize: asset.parsedSize,
       gzipSize: asset.gzipSize,
       groups: _.invokeMap(asset.tree.children, 'toChartData')
@@ -119,6 +122,7 @@ function getBundleModules(bundleStats) {
 }
 
 function assetHasModule(statAsset, statModule) {
+  // Checking if this module is the part of asset chunks
   return _.some(statModule.chunks, moduleChunk =>
     _.includes(statAsset.chunks, moduleChunk)
   );

package/src/bin/analyzer.js

@@ -57,6 +57,12 @@ const program = commander
     '-O, --no-open',
     "Don't open report in default browser automatically."
   )
+  .option(
+    '-e, --exclude <regexp>',
+    'Assets that should be excluded from the report.' +
+    br('Can be specified multiple times.'),
+    array()
+  )
   .option(
     '-l, --log-level <level>',
     'Log level.' +
@@ -73,6 +79,7 @@ let {
   defaultSizes,
   logLevel,
   open: openBrowser,
+  exclude: excludeAssets,
   args: [bundleStatsFile, bundleDir]
 } = program;
 const logger = new Logger(logLevel);
@@ -103,6 +110,7 @@ if (mode === 'server') {
     host,
     defaultSizes,
     bundleDir,
+    excludeAssets,
     logger: new Logger(logLevel)
   });
 } else {
@@ -111,6 +119,7 @@ if (mode === 'server') {
     reportFilename: resolve(reportFilename),
     defaultSizes,
     bundleDir,
+    excludeAssets,
     logger: new Logger(logLevel)
   });
 }
@@ -124,3 +133,11 @@ function showHelp(error) {
 function br(str) {
   return `\n${_.repeat(' ', 28)}${str}`;
 }
+
+function array() {
+  const arr = [];
+  return (val) => {
+    arr.push(val);
+    return arr;
+  };
+}

package/src/parseUtils.js

@@ -26,59 +26,40 @@ function parseBundle(bundlePath) {
     walkState,
     {
       CallExpression(node, state, c) {
-        if (state.sizes) return;
+        if (state.locations) return;
 
         const args = node.arguments;
 
-        // Additional bundle without webpack loader.
-        // Modules are stored in second argument, after chunk ids:
-        // webpackJsonp([<chunks>], <modules>, ...)
-        // As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.
-        if (
-          node.callee.type === 'Identifier' &&
-          args.length >= 2 &&
-          isArgumentContainsChunkIds(args[0]) &&
-          isArgumentContainsModulesList(args[1])
-        ) {
-          state.locations = getModulesLocationFromFunctionArgument(args[1]);
-          return;
-        }
-
-        // Additional bundle without webpack loader, with module IDs optimized.
-        // Modules are stored in second arguments Array(n).concat() call
-        // webpackJsonp([<chunks>], Array([minimum ID]).concat([<module>, <module>, ...]))
-        // As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.
-        if (
-          node.callee.type === 'Identifier' &&
-          (args.length === 2 || args.length === 3) &&
-          isArgumentContainsChunkIds(args[0]) &&
-          isArgumentArrayConcatContainingChunks(args[1])
-        ) {
-          state.locations = getModulesLocationFromArrayConcat(args[1]);
-          return;
-        }
-
-        // Main bundle with webpack loader
+        // Main chunk with webpack loader.
         // Modules are stored in first argument:
         // (function (...) {...})(<modules>)
         if (
           node.callee.type === 'FunctionExpression' &&
           !node.callee.id &&
           args.length === 1 &&
-          isArgumentContainsModulesList(args[0])
+          isSimpleModulesList(args[0])
         ) {
-          state.locations = getModulesLocationFromFunctionArgument(args[0]);
+          state.locations = getModulesLocations(args[0]);
           return;
         }
 
-        // Additional bundles with webpack 4 are loaded with:
-        // (window.webpackJsonp=window.webpackJsonp||[]).push([[chunkId], [<module>, <module>], [[optional_entries]]]);
+        // Async Webpack < v4 chunk without webpack loader.
+        // webpackJsonp([<chunks>], <modules>, ...)
+        // As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.
         if (
-          isAsyncChunkPushExpression(node) &&
-          args.length === 1 &&
-          isArgumentContainingChunkIdsAndModulesList(args[0])
+          node.callee.type === 'Identifier' &&
+          mayBeAsyncChunkArguments(args) &&
+          isModulesList(args[1])
         ) {
-          state.locations = getModulesLocationFromFunctionArgument(args[0].elements[1]);
+          state.locations = getModulesLocations(args[1]);
+          return;
+        }
+
+        // Async Webpack v4 chunk without webpack loader.
+        // (window.webpackJsonp=window.webpackJsonp||[]).push([[<chunks>], <modules>, ...]);
+        // As function name may be changed with `output.jsonpFunction` option we can't rely on it's default name.
+        if (isAsyncChunkPushExpression(node)) {
+          state.locations = getModulesLocations(args[0].elements[1]);
           return;
         }
 
@@ -89,92 +70,78 @@ function parseBundle(bundlePath) {
     }
   );
 
-  if (!walkState.locations) {
-    return null;
+  let modules;
+
+  if (walkState.locations) {
+    modules = _.mapValues(walkState.locations,
+      loc => content.slice(loc.start, loc.end)
+    );
+  } else {
+    modules = {};
   }
 
   return {
     src: content,
-    modules: _.mapValues(walkState.locations,
-      loc => content.slice(loc.start, loc.end)
-    )
+    modules
   };
 }
 
-function isArgumentContainsChunkIds(arg) {
-  // Array of numeric or string ids. Chunk IDs are strings when NamedChunksPlugin is used
-  return (arg.type === 'ArrayExpression' && _.every(arg.elements, isModuleId));
+function isModulesList(node) {
+  return (
+    isSimpleModulesList(node) ||
+    // Modules are contained in expression `Array([minimum ID]).concat([<module>, <module>, ...])`
+    isOptimizedModulesArray(node)
+  );
+}
+
+function isSimpleModulesList(node) {
+  return (
+    // Modules are contained in hash. Keys are module ids.
+    isModulesHash(node) ||
+    // Modules are contained in array. Indexes are module ids.
+    isModulesArray(node)
+  );
 }
 
-function isArgumentContainsModulesList(arg) {
-  if (arg.type === 'ObjectExpression') {
-    return _(arg.properties)
+function isModulesHash(node) {
+  return (
+    node.type === 'ObjectExpression' &&
+    _(node.properties)
       .map('value')
-      .every(isModuleWrapper);
-  }
+      .every(isModuleWrapper)
+  );
+}
 
-  if (arg.type === 'ArrayExpression') {
-    // Modules are contained in array.
-    // Array indexes are module ids
-    return _.every(arg.elements, elem =>
+function isModulesArray(node) {
+  return (
+    node.type === 'ArrayExpression' &&
+    _.every(node.elements, elem =>
       // Some of array items may be skipped because there is no module with such id
       !elem ||
       isModuleWrapper(elem)
-    );
-  }
-
-  return false;
-}
-
-function isArgumentContainingChunkIdsAndModulesList(arg) {
-  if (
-    arg.type === 'ArrayExpression' &&
-    arg.elements.length >= 2 &&
-    isArgumentContainsChunkIds(arg.elements[0]) &&
-    isArgumentContainsModulesList(arg.elements[1])
-  ) {
-    return true;
-  }
-  return false;
+    )
+  );
 }
 
-function isArgumentArrayConcatContainingChunks(arg) {
-  if (
-    arg.type === 'CallExpression' &&
-    arg.callee.type === 'MemberExpression' &&
+function isOptimizedModulesArray(node) {
+  // Checking whether modules are contained in `Array(<minimum ID>).concat(...modules)` array:
+  // https://github.com/webpack/webpack/blob/v1.14.0/lib/Template.js#L91
+  // The `<minimum ID>` + array indexes are module ids
+  return (
+    node.type === 'CallExpression' &&
+    node.callee.type === 'MemberExpression' &&
     // Make sure the object called is `Array(<some number>)`
-    arg.callee.object.type === 'CallExpression' &&
-    arg.callee.object.callee.type === 'Identifier' &&
-    arg.callee.object.callee.name === 'Array' &&
-    arg.callee.object.arguments.length === 1 &&
-    isNumericId(arg.callee.object.arguments[0]) &&
+    node.callee.object.type === 'CallExpression' &&
+    node.callee.object.callee.type === 'Identifier' &&
+    node.callee.object.callee.name === 'Array' &&
+    node.callee.object.arguments.length === 1 &&
+    isNumericId(node.callee.object.arguments[0]) &&
     // Make sure the property X called for `Array(<some number>).X` is `concat`
-    arg.callee.property.type === 'Identifier' &&
-    arg.callee.property.name === 'concat' &&
+    node.callee.property.type === 'Identifier' &&
+    node.callee.property.name === 'concat' &&
     // Make sure exactly one array is passed in to `concat`
-    arg.arguments.length === 1 &&
-    arg.arguments[0].type === 'ArrayExpression'
-  ) {
-    // Modules are contained in `Array(<minimum ID>).concat(` array:
-    // https://github.com/webpack/webpack/blob/v1.14.0/lib/Template.js#L91
-    // The `<minimum ID>` + array indexes are module ids
-    return true;
-  }
-
-  return false;
-}
-
-function isAsyncChunkPushExpression(node) {
-  const { callee } = node;
-  return (
-    callee.type === 'MemberExpression' &&
-    callee.property.name === 'push' &&
-    callee.object.type === 'AssignmentExpression' &&
-    (
-      callee.object.left.object.name === 'window' ||
-      // Webpack 4 uses `this` instead of `window`
-      callee.object.left.object.type === 'ThisExpression'
-    )
+    node.arguments.length === 1 &&
+    isModulesArray(node.arguments[0])
   );
 }
 
@@ -197,9 +164,48 @@ function isNumericId(node) {
   return (node.type === 'Literal' && Number.isInteger(node.value) && node.value >= 0);
 }
 
-function getModulesLocationFromFunctionArgument(arg) {
-  if (arg.type === 'ObjectExpression') {
-    const modulesNodes = arg.properties;
+function isChunkIds(node) {
+  // Array of numeric or string ids. Chunk IDs are strings when NamedChunksPlugin is used
+  return (
+    node.type === 'ArrayExpression' &&
+    _.every(node.elements, isModuleId)
+  );
+}
+
+function isAsyncChunkPushExpression(node) {
+  const {
+    callee,
+    arguments: args
+  } = node;
+
+  return (
+    callee.type === 'MemberExpression' &&
+    callee.property.name === 'push' &&
+    callee.object.type === 'AssignmentExpression' &&
+    callee.object.left.object &&
+    (
+      callee.object.left.object.name === 'window' ||
+      // Webpack 4 uses `this` instead of `window`
+      callee.object.left.object.type === 'ThisExpression'
+    ) &&
+    args.length === 1 &&
+    args[0].type === 'ArrayExpression' &&
+    mayBeAsyncChunkArguments(args[0].elements) &&
+    isModulesList(args[0].elements[1])
+  );
+}
+
+function mayBeAsyncChunkArguments(args) {
+  return (
+    args.length >= 2 &&
+    isChunkIds(args[0])
+  );
+}
+
+function getModulesLocations(node) {
+  if (node.type === 'ObjectExpression') {
+    // Modules hash
+    const modulesNodes = node.properties;
 
     return _.transform(modulesNodes, (result, moduleNode) => {
       const moduleId = moduleNode.key.name || moduleNode.key.value;
@@ -208,35 +214,32 @@ function getModulesLocationFromFunctionArgument(arg) {
     }, {});
   }
 
-  if (arg.type === 'ArrayExpression') {
-    const modulesNodes = arg.elements;
+  const isOptimizedArray = (node.type === 'CallExpression');
+
+  if (node.type === 'ArrayExpression' || isOptimizedArray) {
+    // Modules array or optimized array
+    const minId = isOptimizedArray ?
+      // Get the [minId] value from the Array() call first argument literal value
+      node.callee.object.arguments[0].value :
+      // `0` for simple array
+      0;
+    const modulesNodes = isOptimizedArray ?
+      // The modules reside in the `concat()` function call arguments
+      node.arguments[0].elements :
+      node.elements;
 
     return _.transform(modulesNodes, (result, moduleNode, i) => {
       if (!moduleNode) return;
-
-      result[i] = getModuleLocation(moduleNode);
+      result[i + minId] = getModuleLocation(moduleNode);
     }, {});
   }
 
   return {};
 }
 
-function getModulesLocationFromArrayConcat(arg) {
-  // arg(CallExpression) =
-  //   Array([minId]).concat([<minId module>, <minId+1 module>, ...])
-  //
-  // Get the [minId] value from the Array() call first argument literal value
-  const minId = arg.callee.object.arguments[0].value;
-  // The modules reside in the `concat()` function call arguments
-  const modulesNodes = arg.arguments[0].elements;
-
-  return _.transform(modulesNodes, (result, moduleNode, i) => {
-    if (!moduleNode) return;
-
-    result[i + minId] = getModuleLocation(moduleNode);
-  }, {});
-}
-
 function getModuleLocation(node) {
-  return _.pick(node, 'start', 'end');
+  return {
+    start: node.start,
+    end: node.end
+  };
 }

package/src/tree/BaseFolder.js

@@ -11,10 +11,7 @@ export default class BaseFolder extends Node {
 
   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);
+      this._src = this.walk((node, src) => (src += node.src || ''), '', false);
     }
 
     return this._src;

package/src/tree/Folder.js

@@ -9,12 +9,12 @@ import { getModulePathParts } from './utils';
 export default class Folder extends BaseFolder {
 
   get parsedSize() {
-    return this.src ? this.src.length : undefined;
+    return this.src ? this.src.length : 0;
   }
 
   get gzipSize() {
     if (!_.has(this, '_gzipSize')) {
-      this._gzipSize = this.src ? gzipSize.sync(this.src) : undefined;
+      this._gzipSize = this.src ? gzipSize.sync(this.src) : 0;
     }
 
     return this._gzipSize;

package/src/utils.js

@@ -0,0 +1,34 @@
+const { inspect } = require('util');
+const _ = require('lodash');
+
+exports.createAssetsFilter = createAssetsFilter;
+
+function createAssetsFilter(excludePatterns) {
+  const excludeFunctions = _(excludePatterns)
+    .castArray()
+    .compact()
+    .map(pattern => {
+      if (typeof pattern === 'string') {
+        pattern = new RegExp(pattern);
+      }
+
+      if (_.isRegExp(pattern)) {
+        return (asset) => pattern.test(asset);
+      }
+
+      if (!_.isFunction(pattern)) {
+        throw new TypeError(
+          `Pattern should be either string, RegExp or a function, but "${inspect(pattern, { depth: 0 })}" got.`
+        );
+      }
+
+      return pattern;
+    })
+    .value();
+
+  if (excludeFunctions.length) {
+    return (asset) => _.every(excludeFunctions, fn => fn(asset) !== true);
+  } else {
+    return () => true;
+  }
+}

package/src/viewer.js

@@ -29,10 +29,13 @@ async function startServer(bundleStats, opts) {
     openBrowser = true,
     bundleDir = null,
     logger = new Logger(),
-    defaultSizes = 'parsed'
+    defaultSizes = 'parsed',
+    excludeAssets = null
   } = opts || {};
 
-  let chartData = getChartData(logger, bundleStats, bundleDir);
+  const analyzerOpts = { logger, excludeAssets };
+
+  let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
 
   if (!chartData) return;
 
@@ -90,7 +93,7 @@ async function startServer(bundleStats, opts) {
   };
 
   function updateChartData(bundleStats) {
-    const newChartData = getChartData(logger, bundleStats, bundleDir);
+    const newChartData = getChartData(analyzerOpts, bundleStats, bundleDir);
 
     if (!newChartData) return;
 
@@ -113,10 +116,11 @@ function generateReport(bundleStats, opts) {
     reportFilename = 'report.html',
     bundleDir = null,
     logger = new Logger(),
-    defaultSizes = 'parsed'
+    defaultSizes = 'parsed',
+    excludeAssets = null
   } = opts || {};
 
-  const chartData = getChartData(logger, bundleStats, bundleDir);
+  const chartData = getChartData({ logger, excludeAssets }, bundleStats, bundleDir);
 
   if (!chartData) return;
 
@@ -151,18 +155,19 @@ function getAssetContent(filename) {
   return fs.readFileSync(`${projectRoot}/public/${filename}`, 'utf8');
 }
 
-function getChartData(logger, ...args) {
+function getChartData(analyzerOpts, ...args) {
   let chartData;
+  const { logger } = analyzerOpts;
 
   try {
-    chartData = analyzer.getViewerData(...args, { logger });
+    chartData = analyzer.getViewerData(...args, analyzerOpts);
   } catch (err) {
     logger.error(`Could't analyze webpack bundle:\n${err}`);
     logger.debug(err.stack);
     chartData = null;
   }
 
-  if (_.isEmpty(chartData)) {
+  if (_.isPlainObject(chartData) && _.isEmpty(chartData)) {
     logger.error("Could't find any javascript bundles in provided stats file");
     chartData = null;
   }