webpack-bundle-analyzer 3.5.2 → 3.8.0

package/src/BundleAnalyzerPlugin.js

@@ -7,12 +7,11 @@ const Logger = require('./Logger');
 const viewer = require('./viewer');
 
 class BundleAnalyzerPlugin {
-
   constructor(opts = {}) {
     this.opts = {
       analyzerMode: 'server',
       analyzerHost: '127.0.0.1',
-      reportFilename: 'report.html',
+      reportFilename: null,
       defaultSizes: 'parsed',
       openAnalyzer: true,
       generateStatsFile: false,
@@ -51,6 +50,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) {
@@ -115,10 +116,19 @@ 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'),
       bundleDir: this.getBundleDirFromCompiler(),
       logger: this.logger,
       defaultSizes: this.opts.defaultSizes,

package/src/bin/analyzer.js

@@ -26,9 +26,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 +46,7 @@ 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(
     '-s, --default-sizes <type>',
@@ -86,7 +86,9 @@ let {
 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`.');
+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');
 
@@ -118,15 +120,22 @@ if (mode === 'server') {
     excludeAssets,
     logger: new Logger(logLevel)
   });
-} else {
+} else if (mode === 'static') {
   viewer.generateReport(bundleStats, {
     openBrowser,
-    reportFilename: resolve(reportFilename),
+    reportFilename: resolve(reportFilename || 'report.html'),
     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,12 +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' ||
-      // Webpack 4 uses `this` instead of `window`
-      callee.object.left.object.type === 'ThisExpression'
-    ) &&
     args.length === 1 &&
     args[0].type === 'ArrayExpression' &&
     mayBeAsyncChunkArguments(args[0].elements) &&
@@ -202,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

@@ -44,7 +44,7 @@ exports.getCurrentTime = function () {
   const year = time.getFullYear();
   const month = MONTHS[time.getMonth()];
   const day = time.getDate();
-  const hour = time.getHours();
-  const minute = time.getMinutes();
+  const hour = `0${time.getHours()}`.slice(-2);
+  const minute = `0${time.getMinutes()}`.slice(-2);
   return `${day} ${month} ${year} at ${hour}:${minute}`;
 };

package/src/viewer.js

@@ -20,6 +20,7 @@ const assetsRoot = path.join(projectRoot, 'public');
 module.exports = {
   startServer,
   generateReport,
+  generateJSONReport,
   // deprecated
   start: startServer
 };
@@ -121,7 +122,7 @@ async function startServer(bundleStats, opts) {
 async function generateReport(bundleStats, opts) {
   const {
     openBrowser = true,
-    reportFilename = 'report.html',
+    reportFilename,
     bundleDir = null,
     logger = new Logger(),
     defaultSizes = 'parsed',
@@ -158,9 +159,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 +173,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);