webpack-bundle-analyzer 2.13.0 → 2.13.1

package/CHANGELOG.md

@@ -14,6 +14,17 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 <!-- Add changelog entries for new changes under this section -->
 
+## 2.13.1
+
+ * **Improvement**
+   * Pretty-format the generated stats.json ([#180](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/180)) [@edmorley](https://github.com/edmorley))
+   
+ * **Bug Fix**
+   * Properly parse Webpack 4 async chunk with `Array.concat` optimization ([#184](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/184), fixes [#183](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/183))
+  
+ * **Internal**
+   * Refactor bundle parsing logic ([#184](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/184))
+
 ## 2.13.0
 
  * **Improvement**

package/lib/BundleAnalyzerPlugin.js

@@ -98,6 +98,7 @@ var BundleAnalyzerPlugin = function () {
 
         try {
           yield bfj.write(statsFilepath, stats, {
+            space: 2,
             promises: 'ignore',
             buffers: 'ignore',
             maps: 'ignore',

package/lib/parseUtils.js

@@ -25,40 +25,31 @@ function parseBundle(bundlePath) {
 
   walk.recursive(ast, walkState, {
     CallExpression(node, state, c) {
-      if (state.sizes) return;
+      if (state.locations) return;
 
       var 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]);
+      // Main chunk with webpack loader.
+      // Modules are stored in first argument:
+      // (function (...) {...})(<modules>)
+      if (node.callee.type === 'FunctionExpression' && !node.callee.id && args.length === 1 && isSimpleModulesList(args[0])) {
+        state.locations = getModulesLocations(args[0]);
         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>, ...]))
+      // 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 (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
-      // Modules are stored in first argument:
-      // (function (...) {...})(<modules>)
-      if (node.callee.type === 'FunctionExpression' && !node.callee.id && args.length === 1 && isArgumentContainsModulesList(args[0])) {
-        state.locations = getModulesLocationFromFunctionArgument(args[0]);
+      if (node.callee.type === 'Identifier' && mayBeAsyncChunkArguments(args) && isModulesList(args[1])) {
+        state.locations = getModulesLocations(args[1]);
         return;
       }
 
-      // Additional bundles with webpack 4 are loaded with:
-      // (window.webpackJsonp=window.webpackJsonp||[]).push([[chunkId], [<module>, <module>], [[optional_entries]]]);
-      if (isAsyncChunkPushExpression(node) && args.length === 1 && isArgumentContainingChunkIdsAndModulesList(args[0])) {
-        state.locations = getModulesLocationFromFunctionArgument(args[0].elements[1]);
+      // 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;
       }
 
@@ -86,60 +77,45 @@ function parseBundle(bundlePath) {
   };
 }
 
-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 isArgumentContainsModulesList(arg) {
-  if (arg.type === 'ObjectExpression') {
-    return _(arg.properties).map('value').every(isModuleWrapper);
-  }
-
-  if (arg.type === 'ArrayExpression') {
-    // Modules are contained in array.
-    // Array indexes are module ids
-    return _.every(arg.elements, function (elem) {
-      return (
-        // Some of array items may be skipped because there is no module with such id
-        !elem || isModuleWrapper(elem)
-      );
-    });
-  }
+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)
+  );
+}
 
-  return false;
+function isModulesHash(node) {
+  return node.type === 'ObjectExpression' && _(node.properties).map('value').every(isModuleWrapper);
 }
 
-function isArgumentContainingChunkIdsAndModulesList(arg) {
-  if (arg.type === 'ArrayExpression' && arg.elements.length >= 2 && isArgumentContainsChunkIds(arg.elements[0]) && isArgumentContainsModulesList(arg.elements[1])) {
-    return true;
-  }
-  return false;
+function isModulesArray(node) {
+  return node.type === 'ArrayExpression' && _.every(node.elements, function (elem) {
+    return (
+      // Some of array items may be skipped because there is no module with such id
+      !elem || isModuleWrapper(elem)
+    );
+  });
 }
 
-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) {
-  var callee = node.callee;
-
-  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]);
 }
 
 function isModuleWrapper(node) {
@@ -161,9 +137,29 @@ function isNumericId(node) {
   return node.type === 'Literal' && Number.isInteger(node.value) && node.value >= 0;
 }
 
-function getModulesLocationFromFunctionArgument(arg) {
-  if (arg.type === 'ObjectExpression') {
-    var 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) {
+  var callee = node.callee,
+      args = node.arguments;
+
+
+  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
+    var modulesNodes = node.properties;
 
     return _.transform(modulesNodes, function (result, moduleNode) {
       var moduleId = moduleNode.key.name || moduleNode.key.value;
@@ -172,35 +168,31 @@ function getModulesLocationFromFunctionArgument(arg) {
     }, {});
   }
 
-  if (arg.type === 'ArrayExpression') {
-    var _modulesNodes = arg.elements;
+  var isOptimizedArray = node.type === 'CallExpression';
+
+  if (node.type === 'ArrayExpression' || isOptimizedArray) {
+    // Modules array or optimized array
+    var 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;
+    var _modulesNodes = isOptimizedArray ?
+    // The modules reside in the `concat()` function call arguments
+    node.arguments[0].elements : node.elements;
 
     return _.transform(_modulesNodes, function (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
-  var minId = arg.callee.object.arguments[0].value;
-  // The modules reside in the `concat()` function call arguments
-  var modulesNodes = arg.arguments[0].elements;
-
-  return _.transform(modulesNodes, function (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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-bundle-analyzer",
-  "version": "2.13.0",
+  "version": "2.13.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",

package/src/BundleAnalyzerPlugin.js

@@ -74,6 +74,7 @@ class BundleAnalyzerPlugin {
 
     try {
       await bfj.write(statsFilepath, stats, {
+        space: 2,
         promises: 'ignore',
         buffers: 'ignore',
         maps: 'ignore',

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;
         }
 
@@ -105,80 +86,62 @@ function parseBundle(bundlePath) {
   };
 }
 
-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 isArgumentContainsModulesList(arg) {
-  if (arg.type === 'ObjectExpression') {
-    return _(arg.properties)
+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 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])
   );
 }
 
@@ -201,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;
@@ -212,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
+  };
 }