webpack-bundle-analyzer 2.9.2 → 2.11.1

package/src/BundleAnalyzerPlugin.js

@@ -1,4 +1,4 @@
-const fs = require('fs');
+const bfj = require('bfj-node4');
 const path = require('path');
 const mkdir = require('mkdirp');
 const { bold } = require('chalk');
@@ -32,7 +32,7 @@ class BundleAnalyzerPlugin {
   apply(compiler) {
     this.compiler = compiler;
 
-    compiler.plugin('done', stats => {
+    const done = stats => {
       stats = stats.toJson(this.opts.statsOptions);
 
       const actions = [];
@@ -58,22 +58,36 @@ class BundleAnalyzerPlugin {
           actions.forEach(action => action());
         });
       }
-    });
+    };
+
+    if (compiler.hooks) {
+      compiler.hooks.done.tap('webpack-bundle-analyzer', done);
+    } else {
+      compiler.plugin('done', done);
+    }
   }
 
-  generateStatsFile(stats) {
+  async generateStatsFile(stats) {
     const statsFilepath = path.resolve(this.compiler.outputPath, this.opts.statsFilename);
-
     mkdir.sync(path.dirname(statsFilepath));
 
-    fs.writeFileSync(
-      statsFilepath,
-      JSON.stringify(stats, null, 2)
-    );
+    try {
+      await bfj.write(statsFilepath, stats, {
+        promises: 'ignore',
+        buffers: 'ignore',
+        maps: 'ignore',
+        iterables: 'ignore',
+        circular: 'ignore'
+      });
 
-    this.logger.info(
-      `${bold('Webpack Bundle Analyzer')} saved stats file to ${bold(statsFilepath)}`
-    );
+      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}`
+      );
+    }
   }
 
   async startAnalyzerServer(stats) {

package/src/Logger.js

@@ -1,4 +1,5 @@
 const LEVELS = [
+  'debug',
   'info',
   'warn',
   'error',
@@ -6,6 +7,7 @@ const LEVELS = [
 ];
 
 const LEVEL_TO_CONSOLE_METHOD = new Map([
+  ['debug', 'log'],
   ['info', 'log'],
   ['warn', 'log']
 ]);
@@ -13,8 +15,9 @@ const LEVEL_TO_CONSOLE_METHOD = new Map([
 class Logger {
 
   static levels = LEVELS;
+  static defaultLevel = 'info';
 
-  constructor(level = 'info') {
+  constructor(level = Logger.defaultLevel) {
     this.activeLevels = new Set();
     this.setLogLevel(level);
   }

package/src/analyzer.js

@@ -5,11 +5,10 @@ const _ = require('lodash');
 const gzipSize = require('gzip-size');
 
 const Logger = require('./Logger');
-const { Folder } = require('../lib/tree');
-const { parseBundle } = require('../lib/parseUtils');
+const Folder = require('./tree/Folder').default;
+const { parseBundle } = require('./parseUtils');
 
 const FILENAME_QUERY_REGEXP = /\?.*$/;
-const MULTI_MODULE_REGEXP = /^multi /;
 
 module.exports = {
   getViewerData,
@@ -117,31 +116,7 @@ function assetHasModule(statAsset, statModule) {
 function createModulesTree(modules) {
   const root = new Folder('.');
 
-  _.each(modules, module => {
-    const path = getModulePath(module);
-
-    if (path) {
-      root.addModuleByPath(path, module);
-    }
-  });
+  _.each(modules, module => root.addModule(module));
 
   return root;
 }
-
-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(module.name.split('!'))
-    // Splitting module path into parts
-    .split('/')
-    // Removing first `.`
-    .slice(1)
-    // Replacing `~` with `node_modules`
-    .map(part => (part === '~') ? 'node_modules' : part);
-
-  return parsedPath.length ? parsedPath : null;
-}

package/src/bin/analyzer.js

@@ -8,6 +8,7 @@ const { magenta } = require('chalk');
 
 const analyzer = require('../analyzer');
 const viewer = require('../viewer');
+const Logger = require('../Logger');
 
 const SIZES = new Set(['stat', 'parsed', 'gzip']);
 
@@ -27,40 +28,41 @@ const program = commander
     '-m, --mode <mode>',
     'Analyzer mode. Should be `server` or `static`.' +
     br('In `server` mode analyzer will start HTTP server to show bundle report.') +
-    br('In `static` mode single HTML file with bundle report will be generated.') +
-    br('Default is `server`.'),
+    br('In `static` mode single HTML file with bundle report will be generated.'),
     'server'
   )
   .option(
     '-h, --host <host>',
-    'Host that will be used in `server` mode to start HTTP server.' +
-    br('Default is `127.0.0.1`.'),
+    'Host that will be used in `server` mode to start HTTP server.',
     '127.0.0.1'
   )
   .option(
     '-p, --port <n>',
-    'Port that will be used in `server` mode to start HTTP server.' +
-    br('Default is 8888.'),
+    'Port that will be used in `server` mode to start HTTP server.',
     Number,
     8888
   )
   .option(
     '-r, --report <file>',
-    'Path to bundle report file that will be generated in `static` mode.' +
-    br('Default is `report.html`.'),
+    'Path to bundle report file that will be generated in `static` mode.',
     'report.html'
   )
   .option(
     '-s, --default-sizes <type>',
     'Module sizes to show in treemap by default.' +
-    br(`Possible values: ${[...SIZES].join(', ')}`) +
-    br('Default is `parsed`.'),
+    br(`Possible values: ${[...SIZES].join(', ')}`),
     'parsed'
   )
   .option(
     '-O, --no-open',
     "Don't open report in default browser automatically."
   )
+  .option(
+    '-l, --log-level <level>',
+    'Log level.' +
+    br(`Possible values: ${[...Logger.levels].join(', ')}`),
+    Logger.defaultLevel
+  )
   .parse(process.argv);
 
 let {
@@ -69,9 +71,11 @@ let {
   port,
   report: reportFilename,
   defaultSizes,
+  logLevel,
   open: openBrowser,
   args: [bundleStatsFile, bundleDir]
 } = program;
+const logger = new Logger(logLevel);
 
 if (!bundleStatsFile) showHelp('Provide path to Webpack Stats file as first argument');
 if (mode !== 'server' && mode !== 'static') showHelp('Invalid mode. Should be either `server` or `static`.');
@@ -87,7 +91,8 @@ let bundleStats;
 try {
   bundleStats = analyzer.readStatsFromFile(bundleStatsFile);
 } catch (err) {
-  console.error(`Could't read webpack bundle stats from "${bundleStatsFile}":\n${err}`);
+  logger.error(`Could't read webpack bundle stats from "${bundleStatsFile}":\n${err}`);
+  logger.debug(err.stack);
   process.exit(1);
 }
 
@@ -97,14 +102,16 @@ if (mode === 'server') {
     port,
     host,
     defaultSizes,
-    bundleDir
+    bundleDir,
+    logger: new Logger(logLevel)
   });
 } else {
   viewer.generateReport(bundleStats, {
     openBrowser,
     reportFilename: resolve(reportFilename),
     defaultSizes,
-    bundleDir
+    bundleDir,
+    logger: new Logger(logLevel)
   });
 }
 

package/src/parseUtils.js

@@ -71,6 +71,17 @@ function parseBundle(bundlePath) {
           return;
         }
 
+        // Additional bundles with webpack 4 are loaded with:
+        // (window.webpackJsonp=window.webpackJsonp||[]).push([[chunkId], [<module>, <module>], [[optional_entries]]]);
+        if (
+          isWindowPropertyPushExpression(node) &&
+          args.length === 1 &&
+          isArgumentContainingChunkIdsAndModulesList(args[0])
+        ) {
+          state.locations = getModulesLocationFromFunctionArgument(args[0].elements[1]);
+          return;
+        }
+
         // Walking into arguments because some of plugins (e.g. `DedupePlugin`) or some Webpack
         // features (e.g. `umd` library output) can wrap modules list into additional IIFE.
         _.each(args, arg => c(arg, state));
@@ -115,6 +126,18 @@ function isArgumentContainsModulesList(arg) {
   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' &&
@@ -141,6 +164,13 @@ function isArgumentArrayConcatContainingChunks(arg) {
   return false;
 }
 
+function isWindowPropertyPushExpression(node) {
+  return node.callee.type === 'MemberExpression' &&
+    node.callee.property.name === 'push' &&
+    node.callee.object.type === 'AssignmentExpression' &&
+    node.callee.object.left.object.name === 'window';
+}
+
 function isModuleWrapper(node) {
   return (
     // It's an anonymous function expression that wraps module

package/src/tree/BaseFolder.js

@@ -0,0 +1,95 @@
+import _ from 'lodash';
+
+import Node from './Node';
+
+export default class BaseFolder extends Node {
+
+  constructor(name, parent) {
+    super(name, parent);
+    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, false);
+    }
+
+    return this._size;
+  }
+
+  getChild(name) {
+    return this.children[name];
+  }
+
+  addChildModule(module) {
+    const { name } = module;
+    const currentChild = this.children[name];
+
+    // For some reason we already have this node in children and it's a folder.
+    if (currentChild && currentChild instanceof BaseFolder) return;
+
+    if (currentChild) {
+      // We already have this node in children and it's a module.
+      // Merging it's data.
+      currentChild.mergeData(module.data);
+    } else {
+      // Pushing new module
+      module.parent = this;
+      this.children[name] = module;
+    }
+
+    delete this._size;
+    delete this._src;
+  }
+
+  addChildFolder(folder) {
+    folder.parent = this;
+    this.children[folder.name] = folder;
+    delete this._size;
+    delete this._src;
+
+    return folder;
+  }
+
+  walk(walker, state = {}, deep = true) {
+    let stopped = false;
+
+    _.each(this.children, child => {
+      if (deep && child.walk) {
+        state = child.walk(walker, state, stop);
+      } else {
+        state = walker(child, state, stop);
+      }
+
+      if (stopped) return false;
+    });
+
+    return state;
+
+    function stop(finalState) {
+      stopped = true;
+      return finalState;
+    }
+  }
+
+  toChartData() {
+    return {
+      label: this.name,
+      path: this.path,
+      statSize: this.size,
+      groups: _.invokeMap(this.children, 'toChartData')
+    };
+  }
+
+};

package/src/tree/ConcatenatedModule.js

@@ -0,0 +1,68 @@
+import _ from 'lodash';
+
+import Module from './Module';
+import ContentModule from './ContentModule';
+import ContentFolder from './ContentFolder';
+import { getModulePathParts } from './utils';
+
+export default class ConcatenatedModule extends Module {
+
+  constructor(name, data, parent) {
+    super(name, data, parent);
+    this.name += ' (concatenated)';
+    this.children = Object.create(null);
+    this.fillContentModules();
+  }
+
+  fillContentModules() {
+    _.each(this.data.modules, moduleData => this.addContentModule(moduleData));
+  }
+
+  addContentModule(moduleData) {
+    const pathParts = getModulePathParts(moduleData);
+
+    if (!pathParts) {
+      return;
+    }
+
+    const [folders, fileName] = [pathParts.slice(0, -1), _.last(pathParts)];
+    let currentFolder = this;
+
+    _.each(folders, folderName => {
+      let childFolder = currentFolder.getChild(folderName);
+
+      if (!childFolder) {
+        childFolder = currentFolder.addChildFolder(new ContentFolder(folderName, this));
+      }
+
+      currentFolder = childFolder;
+    });
+
+    const module = new ContentModule(fileName, moduleData, this);
+    currentFolder.addChildModule(module);
+  }
+
+  getChild(name) {
+    return this.children[name];
+  }
+
+  addChildModule(module) {
+    module.parent = this;
+    this.children[module.name] = module;
+  }
+
+  addChildFolder(folder) {
+    folder.parent = this;
+    this.children[folder.name] = folder;
+    return folder;
+  }
+
+  toChartData() {
+    return {
+      ...super.toChartData(),
+      concatenated: true,
+      groups: _.invokeMap(this.children, 'toChartData')
+    };
+  }
+
+};

package/src/tree/ContentFolder.js

@@ -0,0 +1,35 @@
+import BaseFolder from './BaseFolder';
+
+export default class ContentFolder extends BaseFolder {
+
+  constructor(name, ownerModule, parent) {
+    super(name, parent);
+    this.ownerModule = ownerModule;
+  }
+
+  get parsedSize() {
+    return this.getSize('parsedSize');
+  }
+
+  get gzipSize() {
+    return this.getSize('gzipSize');
+  }
+
+  getSize(sizeType) {
+    const ownerModuleSize = this.ownerModule[sizeType];
+
+    if (ownerModuleSize !== undefined) {
+      return Math.floor((this.size / this.ownerModule.size) * ownerModuleSize);
+    }
+  }
+
+  toChartData() {
+    return {
+      ...super.toChartData(),
+      parsedSize: this.parsedSize,
+      gzipSize: this.gzipSize,
+      inaccurateSizes: true
+    };
+  }
+
+};

package/src/tree/ContentModule.js

@@ -0,0 +1,33 @@
+import Module from './Module';
+
+export default class ContentModule extends Module {
+
+  constructor(name, data, ownerModule, parent) {
+    super(name, data, parent);
+    this.ownerModule = ownerModule;
+  }
+
+  get parsedSize() {
+    return this.getSize('parsedSize');
+  }
+
+  get gzipSize() {
+    return this.getSize('gzipSize');
+  }
+
+  getSize(sizeType) {
+    const ownerModuleSize = this.ownerModule[sizeType];
+
+    if (ownerModuleSize !== undefined) {
+      return Math.floor((this.size / this.ownerModule.size) * ownerModuleSize);
+    }
+  }
+
+  toChartData() {
+    return {
+      ...super.toChartData(),
+      inaccurateSizes: true
+    };
+  }
+
+};

package/src/tree/Folder.js

@@ -0,0 +1,64 @@
+import _ from 'lodash';
+import gzipSize from 'gzip-size';
+
+import Module from './Module';
+import BaseFolder from './BaseFolder';
+import ConcatenatedModule from './ConcatenatedModule';
+import { getModulePathParts } from './utils';
+
+export default class Folder extends BaseFolder {
+
+  get parsedSize() {
+    return this.src ? this.src.length : undefined;
+  }
+
+  get gzipSize() {
+    if (!_.has(this, '_gzipSize')) {
+      this._gzipSize = this.src ? gzipSize.sync(this.src) : undefined;
+    }
+
+    return this._gzipSize;
+  }
+
+  addModule(moduleData) {
+    const pathParts = getModulePathParts(moduleData);
+
+    if (!pathParts) {
+      return;
+    }
+
+    const [folders, fileName] = [pathParts.slice(0, -1), _.last(pathParts)];
+    let currentFolder = this;
+
+    _.each(folders, folderName => {
+      let childNode = currentFolder.getChild(folderName);
+
+      if (
+        // Folder is not created yet
+        !childNode ||
+        // In some situations (invalid usage of dynamic `require()`) webpack generates a module with empty require
+        // context, but it's moduleId points to a directory in filesystem.
+        // In this case we replace this `File` node with `Folder`.
+        // See `test/stats/with-invalid-dynamic-require.json` as an example.
+        !(childNode instanceof Folder)
+      ) {
+        childNode = currentFolder.addChildFolder(new Folder(folderName));
+      }
+
+      currentFolder = childNode;
+    });
+
+    const ModuleConstructor = moduleData.modules ? ConcatenatedModule : Module;
+    const module = new ModuleConstructor(fileName, moduleData, this);
+    currentFolder.addChildModule(module);
+  }
+
+  toChartData() {
+    return {
+      ...super.toChartData(),
+      parsedSize: this.parsedSize,
+      gzipSize: this.gzipSize
+    };
+  }
+
+};

package/src/tree/Module.js

@@ -0,0 +1,63 @@
+import _ from 'lodash';
+import gzipSize from 'gzip-size';
+
+import Node from './Node';
+
+export default class Module extends Node {
+
+  constructor(name, data, parent) {
+    super(name, parent);
+    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.src ? this.src.length : undefined;
+  }
+
+  get gzipSize() {
+    if (!_.has(this, '_gzipSize')) {
+      this._gzipSize = this.src ? gzipSize.sync(this.src) : undefined;
+    }
+
+    return this._gzipSize;
+  }
+
+  mergeData(data) {
+    if (data.size) {
+      this.size += data.size;
+    }
+
+    if (data.parsedSrc) {
+      this.src = (this.src || '') + data.parsedSrc;
+    }
+  }
+
+  toChartData() {
+    return {
+      id: this.data.id,
+      label: this.name,
+      path: this.path,
+      statSize: this.size,
+      parsedSize: this.parsedSize,
+      gzipSize: this.gzipSize
+    };
+  }
+
+};

package/src/tree/Node.js

@@ -0,0 +1,20 @@
+export default class Node {
+
+  constructor(name, parent) {
+    this.name = name;
+    this.parent = parent;
+  }
+
+  get path() {
+    const path = [];
+    let node = this;
+
+    while (node) {
+      path.push(node.name);
+      node = node.parent;
+    }
+
+    return path.reverse().join('/');
+  }
+
+};

package/src/tree/utils.js

@@ -0,0 +1,21 @@
+import _ from 'lodash';
+
+const MULTI_MODULE_REGEXP = /^multi /;
+
+export function getModulePathParts(moduleData) {
+  if (MULTI_MODULE_REGEXP.test(moduleData.identifier)) {
+    return [moduleData.identifier];
+  }
+
+  const parsedPath = _
+  // Removing loaders from module path: they're joined by `!` and the last part is a raw module path
+    .last(moduleData.name.split('!'))
+    // Splitting module path into parts
+    .split('/')
+    // Removing first `.`
+    .slice(1)
+    // Replacing `~` with `node_modules`
+    .map(part => (part === '~' ? 'node_modules' : part));
+
+  return parsedPath.length ? parsedPath : null;
+}

package/src/viewer.js

@@ -158,6 +158,7 @@ function getChartData(logger, ...args) {
     chartData = analyzer.getViewerData(...args, { logger });
   } catch (err) {
     logger.error(`Could't analyze webpack bundle:\n${err}`);
+    logger.debug(err.stack);
     chartData = null;
   }