webpack-bundle-analyzer 3.6.0 → 3.9.0

package/src/BundleAnalyzerPlugin.js

@@ -5,14 +5,15 @@ const {bold} = require('chalk');
 
 const Logger = require('./Logger');
 const viewer = require('./viewer');
+const utils = require('./utils');
 
 class BundleAnalyzerPlugin {
-
   constructor(opts = {}) {
     this.opts = {
       analyzerMode: 'server',
       analyzerHost: '127.0.0.1',
-      reportFilename: 'report.html',
+      reportFilename: null,
+      reportTitle: utils.defaultTitle,
       defaultSizes: 'parsed',
       openAnalyzer: true,
       generateStatsFile: false,
@@ -51,6 +52,8 @@ class BundleAnalyzerPlugin {
         actions.push(() => this.startAnalyzerServer(stats.toJson()));
       } else if (this.opts.analyzerMode === 'static') {
         actions.push(() => this.generateStaticReport(stats.toJson()));
+      } else if (this.opts.analyzerMode === 'json') {
+        actions.push(() => this.generateJSONReport(stats.toJson()));
       }
 
       if (actions.length) {
@@ -107,6 +110,7 @@ class BundleAnalyzerPlugin {
         openBrowser: this.opts.openAnalyzer,
         host: this.opts.analyzerHost,
         port: this.opts.analyzerPort,
+        reportTitle: this.opts.reportTitle,
         bundleDir: this.getBundleDirFromCompiler(),
         logger: this.logger,
         defaultSizes: this.opts.defaultSizes,
@@ -115,10 +119,20 @@ class BundleAnalyzerPlugin {
     }
   }
 
+  async generateJSONReport(stats) {
+    await viewer.generateJSONReport(stats, {
+      reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename || 'report.json'),
+      bundleDir: this.getBundleDirFromCompiler(),
+      logger: this.logger,
+      excludeAssets: this.opts.excludeAssets
+    });
+  }
+
   async generateStaticReport(stats) {
     await viewer.generateReport(stats, {
       openBrowser: this.opts.openAnalyzer,
-      reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename),
+      reportFilename: path.resolve(this.compiler.outputPath, this.opts.reportFilename || 'report.html'),
+      reportTitle: this.opts.reportTitle,
       bundleDir: this.getBundleDirFromCompiler(),
       logger: this.logger,
       defaultSizes: this.opts.defaultSizes,

package/src/analyzer.js

@@ -27,7 +27,24 @@ function getViewerData(bundleStats, bundleDir, opts) {
 
   // Sometimes all the information is located in `children` array (e.g. problem in #10)
   if (_.isEmpty(bundleStats.assets) && !_.isEmpty(bundleStats.children)) {
+    const {children} = bundleStats;
     bundleStats = bundleStats.children[0];
+    // Sometimes if there are additional child chunks produced add them as child assets,
+    // leave the 1st one as that is considered the 'root' asset.
+    for (let i = 1; i < children.length; i++) {
+      bundleStats.children[i].assets.forEach((asset) => {
+        asset.isChild = true;
+        bundleStats.assets.push(asset);
+      });
+    }
+  } else if (!_.isEmpty(bundleStats.children)) {
+    // Sometimes if there are additional child chunks produced add them as child assets
+    bundleStats.children.forEach((child) => {
+      child.assets.forEach((asset) => {
+        asset.isChild = true;
+        bundleStats.assets.push(asset);
+      });
+    });
   }
 
   // Picking only `*.js or *.mjs` assets from bundle that has non-empty `chunks` array
@@ -70,8 +87,10 @@ function getViewerData(bundleStats, bundleDir, opts) {
     }
   }
 
-  const modules = getBundleModules(bundleStats);
   const assets = _.transform(bundleStats.assets, (result, statAsset) => {
+    // If asset is a childAsset, then calculate appropriate bundle modules by looking through stats.children
+    const assetBundles = statAsset.isChild ? getChildAssetBundles(bundleStats, statAsset.name) : bundleStats;
+    const modules = assetBundles ? getBundleModules(assetBundles) : [];
     const asset = result[statAsset.name] = _.pick(statAsset, 'size');
 
     if (bundlesSources && _.has(bundlesSources, statAsset.name)) {
@@ -113,6 +132,15 @@ function readStatsFromFile(filename) {
   );
 }
 
+function getChildAssetBundles(bundleStats, assetName) {
+  return _.find(bundleStats.children, (c) =>
+    _(c.assetsByChunkName)
+      .values()
+      .flatten()
+      .includes(assetName)
+  );
+}
+
 function getBundleModules(bundleStats) {
   return _(bundleStats.chunks)
     .map('modules')

package/src/bin/analyzer.js

@@ -9,6 +9,7 @@ const {magenta} = require('chalk');
 const analyzer = require('../analyzer');
 const viewer = require('../viewer');
 const Logger = require('../Logger');
+const utils = require('../utils');
 
 const SIZES = new Set(['stat', 'parsed', 'gzip']);
 
@@ -26,9 +27,10 @@ const program = commander
   )
   .option(
     '-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.'),
+    'Analyzer mode. Should be `server`,`static` or `json`.' +
+      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('In `json` mode single JSON file with bundle report will be generated.'),
     'server'
   )
   .option(
@@ -45,8 +47,11 @@ const program = commander
   )
   .option(
     '-r, --report <file>',
-    'Path to bundle report file that will be generated in `static` mode.',
-    'report.html'
+    'Path to bundle report file that will be generated in `static` mode.'
+  )
+  .option(
+    '-t, --title <title>',
+    'String to use in title element of html report.'
   )
   .option(
     '-s, --default-sizes <type>',
@@ -77,6 +82,7 @@ let {
   host,
   port,
   report: reportFilename,
+  title: reportTitle,
   defaultSizes,
   logLevel,
   open: openBrowser,
@@ -85,8 +91,14 @@ let {
 } = program;
 const logger = new Logger(logLevel);
 
+if (typeof reportTitle === 'undefined') {
+  reportTitle = utils.defaultTitle;
+}
+
 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`.');
+if (mode !== 'server' && mode !== 'static' && mode !== 'json') {
+  showHelp('Invalid mode. Should be either `server`, `static` or `json`.');
+}
 if (mode === 'server') {
   if (!host) showHelp('Invalid host name');
 
@@ -114,19 +126,28 @@ if (mode === 'server') {
     port,
     host,
     defaultSizes,
+    reportTitle,
     bundleDir,
     excludeAssets,
     logger: new Logger(logLevel)
   });
-} else {
+} else if (mode === 'static') {
   viewer.generateReport(bundleStats, {
     openBrowser,
-    reportFilename: resolve(reportFilename),
+    reportFilename: resolve(reportFilename || 'report.html'),
+    reportTitle,
     defaultSizes,
     bundleDir,
     excludeAssets,
     logger: new Logger(logLevel)
   });
+} else if (mode === 'json') {
+  viewer.generateJSONReport(bundleStats, {
+    reportFilename: resolve(reportFilename || 'report.json'),
+    bundleDir,
+    excludeAssets,
+    logger: new Logger(logLevel)
+  });
 }
 
 function showHelp(error) {

package/src/parseUtils.js

@@ -25,6 +25,22 @@ function parseBundle(bundlePath) {
     ast,
     walkState,
     {
+      AssignmentExpression(node, state) {
+        if (state.locations) return;
+
+        // Modules are stored in exports.modules:
+        // exports.modules = {};
+        const {left, right} = node;
+
+        if (
+          left &&
+          left.object && left.object.name === 'exports' &&
+          left.property && left.property.name === 'modules' &&
+          isModulesHash(right)
+        ) {
+          state.locations = getModulesLocations(right);
+        }
+      },
       CallExpression(node, state, c) {
         if (state.locations) return;
 
@@ -63,6 +79,15 @@ function parseBundle(bundlePath) {
           return;
         }
 
+        // Webpack v4 WebWorkerChunkTemplatePlugin
+        // globalObject.chunkCallbackName([<chunks>],<modules>, ...);
+        // Both globalObject and chunkCallbackName can be changed through the config, so we can't check them.
+        if (isAsyncWebWorkerChunkExpression(node)) {
+          state.locations = getModulesLocations(args[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));
@@ -182,14 +207,6 @@ function isAsyncChunkPushExpression(node) {
     callee.type === 'MemberExpression' &&
     callee.property.name === 'push' &&
     callee.object.type === 'AssignmentExpression' &&
-    callee.object.left.object &&
-    (
-      callee.object.left.object.name === 'window' ||
-      // `self` is a common output.globalObject value used to support both workers and browsers
-      callee.object.left.object.name === 'self' ||
-      // Webpack 4 uses `this` instead of `window`
-      callee.object.left.object.type === 'ThisExpression'
-    ) &&
     args.length === 1 &&
     args[0].type === 'ArrayExpression' &&
     mayBeAsyncChunkArguments(args[0].elements) &&
@@ -204,6 +221,18 @@ function mayBeAsyncChunkArguments(args) {
   );
 }
 
+function isAsyncWebWorkerChunkExpression(node) {
+  const {callee, type, arguments: args} = node;
+
+  return (
+    type === 'CallExpression' &&
+    callee.type === 'MemberExpression' &&
+    args.length === 2 &&
+    isChunkIds(args[0]) &&
+    isModulesList(args[1])
+  );
+}
+
 function getModulesLocations(node) {
   if (node.type === 'ObjectExpression') {
     // Modules hash

package/src/utils.js

@@ -39,12 +39,15 @@ function createAssetsFilter(excludePatterns) {
  * @desc get string of current time
  * format: dd/MMM HH:mm
  * */
-exports.getCurrentTime = function () {
+exports.defaultTitle = function () {
   const time = new Date();
   const year = time.getFullYear();
   const month = MONTHS[time.getMonth()];
   const day = time.getDate();
-  const hour = time.getHours();
-  const minute = time.getMinutes();
-  return `${day} ${month} ${year} at ${hour}:${minute}`;
+  const hour = `0${time.getHours()}`.slice(-2);
+  const minute = `0${time.getMinutes()}`.slice(-2);
+
+  const currentTime = `${day} ${month} ${year} at ${hour}:${minute}`;
+
+  return `${process.env.npm_package_name || 'Webpack Bundle Analyzer'} [${currentTime}]`;
 };

package/src/viewer.js

@@ -10,22 +10,28 @@ const opener = require('opener');
 const mkdir = require('mkdirp');
 const {bold} = require('chalk');
 
-const utils = require('./utils');
 const Logger = require('./Logger');
 const analyzer = require('./analyzer');
 
 const projectRoot = path.resolve(__dirname, '..');
 const assetsRoot = path.join(projectRoot, 'public');
 
+function resolveTitle(reportTitle) {
+  if (typeof reportTitle === 'function') {
+    return reportTitle();
+  } else {
+    return reportTitle;
+  }
+}
+
 module.exports = {
   startServer,
   generateReport,
+  generateJSONReport,
   // deprecated
   start: startServer
 };
 
-const title = `${process.env.npm_package_name || 'Webpack Bundle Analyzer'} [${utils.getCurrentTime()}]`;
-
 async function startServer(bundleStats, opts) {
   const {
     port = 8888,
@@ -34,7 +40,8 @@ async function startServer(bundleStats, opts) {
     bundleDir = null,
     logger = new Logger(),
     defaultSizes = 'parsed',
-    excludeAssets = null
+    excludeAssets = null,
+    reportTitle
   } = opts || {};
 
   const analyzerOpts = {logger, excludeAssets};
@@ -55,7 +62,7 @@ async function startServer(bundleStats, opts) {
   app.use('/', (req, res) => {
     res.render('viewer', {
       mode: 'server',
-      title,
+      title: resolveTitle(reportTitle),
       get chartData() { return chartData },
       defaultSizes,
       enableWebSocket: true,
@@ -121,7 +128,8 @@ async function startServer(bundleStats, opts) {
 async function generateReport(bundleStats, opts) {
   const {
     openBrowser = true,
-    reportFilename = 'report.html',
+    reportFilename,
+    reportTitle,
     bundleDir = null,
     logger = new Logger(),
     defaultSizes = 'parsed',
@@ -137,7 +145,7 @@ async function generateReport(bundleStats, opts) {
       `${projectRoot}/views/viewer.ejs`,
       {
         mode: 'static',
-        title,
+        title: resolveTitle(reportTitle),
         chartData,
         defaultSizes,
         enableWebSocket: false,
@@ -158,9 +166,7 @@ async function generateReport(bundleStats, opts) {
           mkdir.sync(path.dirname(reportFilepath));
           fs.writeFileSync(reportFilepath, reportHtml);
 
-          logger.info(
-            `${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`
-          );
+          logger.info(`${bold('Webpack Bundle Analyzer')} saved report to ${bold(reportFilepath)}`);
 
           if (openBrowser) {
             opener(`file://${reportFilepath}`);
@@ -174,6 +180,19 @@ async function generateReport(bundleStats, opts) {
   });
 }
 
+async function generateJSONReport(bundleStats, opts) {
+  const {reportFilename, bundleDir = null, logger = new Logger(), excludeAssets = null} = opts || {};
+
+  const chartData = getChartData({logger, excludeAssets}, bundleStats, bundleDir);
+
+  if (!chartData) return;
+
+  mkdir.sync(path.dirname(reportFilename));
+  fs.writeFileSync(reportFilename, JSON.stringify(chartData));
+
+  logger.info(`${bold('Webpack Bundle Analyzer')} saved JSON report to ${bold(reportFilename)}`);
+}
+
 function getAssetContent(filename) {
   const assetPath = path.join(assetsRoot, filename);