webpack-bundle-analyzer 4.10.2 → 5.0.1

package/lib/bin/analyzer.js

@@ -5,22 +5,16 @@ const {
   resolve,
   dirname
 } = require('path');
-
 const commander = require('commander');
-
 const {
   magenta
 } = require('picocolors');
-
 const analyzer = require('../analyzer');
-
 const viewer = require('../viewer');
-
 const Logger = require('../Logger');
-
 const utils = require('../utils');
-
 const SIZES = new Set(['stat', 'parsed', 'gzip']);
+const COMPRESSION_ALGORITHMS = new Set(['gzip', 'brotli']);
 const program = commander.version(require('../../package.json').version).usage(`<bundleStatsFile> [bundleDir] [options]
 
   Arguments:
@@ -28,9 +22,10 @@ const program = commander.version(require('../../package.json').version).usage(`
     bundleStatsFile  Path to Webpack Stats JSON file.
     bundleDir        Directory containing all generated bundles.
                      You should provided it if you want analyzer to show you the real parsed module sizes.
-                     By default a directory of stats file is used.`).option('-m, --mode <mode>', '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( // Had to make `host` parameter optional in order to let `-h` flag output help message
-// Fixes https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/239
-'-h, --host [host]', '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.', 8888).option('-r, --report <file>', '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>', 'Module sizes to show in treemap by default.' + br(`Possible values: ${[...SIZES].join(', ')}`), 'parsed').option('-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.' + br(`Possible values: ${[...Logger.levels].join(', ')}`), Logger.defaultLevel).parse(process.argv);
+                     By default a directory of stats file is used.`).option('-m, --mode <mode>', '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(
+// Had to make `host` parameter optional in order to let `-h` flag output help message
+// Fixes https://github.com/webpack/webpack-bundle-analyzer/issues/239
+'-h, --host [host]', '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.', 8888).option('-r, --report <file>', '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>', 'Module sizes to show in treemap by default.' + br(`Possible values: ${[...SIZES].join(', ')}`), 'parsed').option('--compression-algorithm <type>', 'Compression algorithm that will be used to calculate the compressed module sizes.' + br(`Possible values: ${[...COMPRESSION_ALGORITHMS].join(', ')}`), 'gzip').option('-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.' + br(`Possible values: ${[...Logger.levels].join(', ')}`), Logger.defaultLevel).parse(process.argv);
 let [bundleStatsFile, bundleDir] = program.args;
 let {
   mode,
@@ -39,43 +34,41 @@ let {
   report: reportFilename,
   title: reportTitle,
   defaultSizes,
+  compressionAlgorithm,
   logLevel,
   open: openBrowser,
   exclude: excludeAssets
 } = program.opts();
 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' && mode !== 'json') {
   showHelp('Invalid mode. Should be either `server`, `static` or `json`.');
 }
-
 if (mode === 'server') {
   if (!host) showHelp('Invalid host name');
   port = port === 'auto' ? 0 : Number(port);
   if (isNaN(port)) showHelp('Invalid port. Should be a number or `auto`');
 }
-
+if (!COMPRESSION_ALGORITHMS.has(compressionAlgorithm)) {
+  showHelp(`Invalid compression algorithm option. Possible values are: ${[...COMPRESSION_ALGORITHMS].join(', ')}`);
+}
 if (!SIZES.has(defaultSizes)) showHelp(`Invalid default sizes option. Possible values are: ${[...SIZES].join(', ')}`);
 bundleStatsFile = resolve(bundleStatsFile);
 if (!bundleDir) bundleDir = dirname(bundleStatsFile);
 parseAndAnalyse(bundleStatsFile);
-
 async function parseAndAnalyse(bundleStatsFile) {
   try {
     const bundleStats = await analyzer.readStatsFromFile(bundleStatsFile);
-
     if (mode === 'server') {
       viewer.startServer(bundleStats, {
         openBrowser,
         port,
         host,
         defaultSizes,
+        compressionAlgorithm,
         reportTitle,
         bundleDir,
         excludeAssets,
@@ -88,6 +81,7 @@ async function parseAndAnalyse(bundleStatsFile) {
         reportFilename: resolve(reportFilename || 'report.html'),
         reportTitle,
         defaultSizes,
+        compressionAlgorithm,
         bundleDir,
         excludeAssets,
         logger: new Logger(logLevel)
@@ -95,6 +89,7 @@ async function parseAndAnalyse(bundleStatsFile) {
     } else if (mode === 'json') {
       viewer.generateJSONReport(bundleStats, {
         reportFilename: resolve(reportFilename || 'report.json'),
+        compressionAlgorithm,
         bundleDir,
         excludeAssets,
         logger: new Logger(logLevel)
@@ -106,17 +101,14 @@ async function parseAndAnalyse(bundleStatsFile) {
     process.exit(1);
   }
 }
-
 function showHelp(error) {
   if (error) console.log(`\n  ${magenta(error)}\n`);
   program.outputHelp();
   process.exit(1);
 }
-
 function br(str) {
-  return `\n${' '.repeat(28)}${str}`;
+  return `\n${' '.repeat(32)}${str}`;
 }
-
 function array() {
   const arr = [];
   return val => {

package/lib/index.js

@@ -3,7 +3,6 @@
 const {
   start
 } = require('./viewer');
-
 module.exports = {
   start,
   BundleAnalyzerPlugin: require('./BundleAnalyzerPlugin')

package/lib/parseUtils.js

@@ -1,19 +1,18 @@
 "use strict";
 
 const fs = require('fs');
-
 const acorn = require('acorn');
-
 const walk = require('acorn-walk');
-
 module.exports = {
   parseBundle
 };
-
-function parseBundle(bundlePath) {
+function parseBundle(bundlePath, opts) {
+  const {
+    sourceType = 'script'
+  } = opts || {};
   const content = fs.readFileSync(bundlePath, 'utf8');
   const ast = acorn.parse(content, {
-    sourceType: 'script',
+    sourceType,
     // I believe in a bright future of ECMAScript!
     // Actually, it's set to `2050` to support the latest ECMAScript version that currently exists.
     // Seems like `acorn` supports such weird option value.
@@ -27,22 +26,21 @@ function parseBundle(bundlePath) {
     ExpressionStatement(node, state, c) {
       if (state.locations) return;
       state.expressionStatementDepth++;
-
-      if ( // Webpack 5 stores modules in the the top-level IIFE
+      if (
+      // Webpack 5 stores modules in the the top-level IIFE
       state.expressionStatementDepth === 1 && ast.body.includes(node) && isIIFE(node)) {
         const fn = getIIFECallExpression(node);
-
-        if ( // It should not contain neither arguments
-        fn.arguments.length === 0 && // ...nor parameters
+        if (
+        // It should not contain neither arguments
+        fn.arguments.length === 0 &&
+        // ...nor parameters
         fn.callee.params.length === 0) {
           // Modules are stored in the very first variable declaration as hash
           const firstVariableDeclaration = fn.callee.body.body.find(node => node.type === 'VariableDeclaration');
-
           if (firstVariableDeclaration) {
             for (const declaration of firstVariableDeclaration.declarations) {
               if (declaration.init) {
                 state.locations = getModulesLocations(declaration.init);
-
                 if (state.locations) {
                   break;
                 }
@@ -51,93 +49,85 @@ function parseBundle(bundlePath) {
           }
         }
       }
-
       if (!state.locations) {
         c(node.expression, state);
       }
-
       state.expressionStatementDepth--;
     },
-
     AssignmentExpression(node, state) {
-      if (state.locations) return; // Modules are stored in exports.modules:
-      // exports.modules = {};
+      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;
-      const args = node.arguments; // Main chunk with webpack loader.
+      const args = node.arguments;
+
+      // 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;
-      } // Async Webpack < v4 chunk without webpack loader.
+      }
+
+      // 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' && mayBeAsyncChunkArguments(args) && isModulesList(args[1])) {
         state.locations = getModulesLocations(args[1]);
         return;
-      } // Async Webpack v4 chunk without webpack loader.
+      }
+
+      // 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;
-      } // Webpack v4 WebWorkerChunkTemplatePlugin
+      }
+
+      // 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.
-
+      }
 
+      // 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.
       args.forEach(arg => c(arg, state));
     }
-
   });
   const modules = {};
-
   if (walkState.locations) {
     Object.entries(walkState.locations).forEach(([id, loc]) => {
       modules[id] = content.slice(loc.start, loc.end);
     });
   }
-
   return {
     modules,
     src: content,
     runtimeSrc: getBundleRuntime(content, walkState.locations)
   };
 }
+
 /**
  * Returns bundle source except modules
  */
-
-
 function getBundleRuntime(content, modulesLocations) {
   const sortedLocations = Object.values(modulesLocations || {}).sort((a, b) => a.start - b.start);
   let result = '';
   let lastIndex = 0;
-
   for (const {
     start,
     end
@@ -145,14 +135,11 @@ function getBundleRuntime(content, modulesLocations) {
     result += content.slice(lastIndex, start);
     lastIndex = end;
   }
-
   return result + content.slice(lastIndex, content.length);
 }
-
 function isIIFE(node) {
   return node.type === 'ExpressionStatement' && (node.expression.type === 'CallExpression' || node.expression.type === 'UnaryExpression' && node.expression.argument.type === 'CallExpression');
 }
-
 function getIIFECallExpression(node) {
   if (node.expression.type === 'UnaryExpression') {
     return node.expression.argument;
@@ -160,59 +147,59 @@ function getIIFECallExpression(node) {
     return node.expression;
   }
 }
-
 function isModulesList(node) {
-  return isSimpleModulesList(node) || // Modules are contained in expression `Array([minimum ID]).concat([<module>, <module>, ...])`
+  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.
+  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(node => node.value).every(isModuleWrapper);
 }
-
 function isModulesArray(node) {
-  return node.type === 'ArrayExpression' && node.elements.every(elem => // Some of array items may be skipped because there is no module with such id
+  return node.type === 'ArrayExpression' && node.elements.every(elem =>
+  // Some of array items may be skipped because there is no module with such id
   !elem || isModuleWrapper(elem));
 }
-
 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>)`
-  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`
-  node.callee.property.type === 'Identifier' && node.callee.property.name === 'concat' && // Make sure exactly one array is passed in to `concat`
+  return node.type === 'CallExpression' && node.callee.type === 'MemberExpression' &&
+  // Make sure the object called is `Array(<some number>)`
+  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`
+  node.callee.property.type === 'Identifier' && node.callee.property.name === 'concat' &&
+  // Make sure exactly one array is passed in to `concat`
   node.arguments.length === 1 && isModulesArray(node.arguments[0]);
 }
-
 function isModuleWrapper(node) {
-  return (// It's an anonymous function expression that wraps module
-    (node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') && !node.id || // If `DedupePlugin` is used it can be an ID of duplicated module...
-    isModuleId(node) || // or an array of shape [<module_id>, ...args]
+  return (
+    // It's an anonymous function expression that wraps module
+    (node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') && !node.id ||
+    // If `DedupePlugin` is used it can be an ID of duplicated module...
+    isModuleId(node) ||
+    // or an array of shape [<module_id>, ...args]
     node.type === 'ArrayExpression' && node.elements.length > 1 && isModuleId(node.elements[0])
   );
 }
-
 function isModuleId(node) {
   return node.type === 'Literal' && (isNumericId(node) || typeof node.value === 'string');
 }
-
 function isNumericId(node) {
   return node.type === 'Literal' && Number.isInteger(node.value) && node.value >= 0;
 }
-
 function isChunkIds(node) {
   // Array of numeric or string ids. Chunk IDs are strings when NamedChunksPlugin is used
   return node.type === 'ArrayExpression' && node.elements.every(isModuleId);
 }
-
 function isAsyncChunkPushExpression(node) {
   const {
     callee,
@@ -220,11 +207,9 @@ function isAsyncChunkPushExpression(node) {
   } = node;
   return callee.type === 'MemberExpression' && callee.property.name === 'push' && callee.object.type === 'AssignmentExpression' && 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 isAsyncWebWorkerChunkExpression(node) {
   const {
     callee,
@@ -233,7 +218,6 @@ function isAsyncWebWorkerChunkExpression(node) {
   } = 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
@@ -244,28 +228,26 @@ function getModulesLocations(node) {
       return result;
     }, {});
   }
-
   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
+    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
+    const modulesNodes = isOptimizedArray ?
+    // The modules reside in the `concat()` function call arguments
     node.arguments[0].elements : node.elements;
     return modulesNodes.reduce((result, moduleNode, i) => {
       if (moduleNode) {
         result[i + minId] = getModuleLocation(moduleNode);
       }
-
       return result;
     }, {});
   }
-
   return {};
 }
-
 function getModuleLocation(node) {
   return {
     start: node.start,

package/lib/sizeUtils.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCompressedSize = getCompressedSize;
+const zlib = require('zlib');
+function getCompressedSize(compressionAlgorithm, input) {
+  if (compressionAlgorithm === 'gzip') return zlib.gzipSync(input, {
+    level: 9
+  }).length;
+  if (compressionAlgorithm === 'brotli') return zlib.brotliCompressSync(input).length;
+  throw new Error(`Unsupported compression algorithm: ${compressionAlgorithm}.`);
+}

package/lib/statsUtils.js

@@ -3,31 +3,25 @@
 const {
   createWriteStream
 } = require('fs');
-
 const {
   Readable
 } = require('stream');
-
 class StatsSerializeStream extends Readable {
   constructor(stats) {
     super();
     this._indentLevel = 0;
     this._stringifier = this._stringify(stats);
   }
-
   get _indent() {
     return '  '.repeat(this._indentLevel);
   }
-
   _read() {
     let readMore = true;
-
     while (readMore) {
       const {
         value,
         done
       } = this._stringifier.next();
-
       if (done) {
         this.push(null);
         readMore = false;
@@ -36,7 +30,6 @@ class StatsSerializeStream extends Readable {
       }
     }
   }
-
   *_stringify(obj) {
     if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean' || obj === null) {
       yield JSON.stringify(obj);
@@ -44,17 +37,14 @@ class StatsSerializeStream extends Readable {
       yield '[';
       this._indentLevel++;
       let isFirst = true;
-
       for (let item of obj) {
         if (item === undefined) {
           item = null;
         }
-
         yield `${isFirst ? '' : ','}\n${this._indent}`;
         yield* this._stringify(item);
         isFirst = false;
       }
-
       this._indentLevel--;
       yield obj.length ? `\n${this._indent}]` : ']';
     } else {
@@ -62,27 +52,21 @@ class StatsSerializeStream extends Readable {
       this._indentLevel++;
       let isFirst = true;
       const entries = Object.entries(obj);
-
       for (const [itemKey, itemValue] of entries) {
         if (itemValue === undefined) {
           continue;
         }
-
         yield `${isFirst ? '' : ','}\n${this._indent}${JSON.stringify(itemKey)}: `;
         yield* this._stringify(itemValue);
         isFirst = false;
       }
-
       this._indentLevel--;
       yield entries.length ? `\n${this._indent}}` : '}';
     }
   }
-
 }
-
 exports.StatsSerializeStream = StatsSerializeStream;
 exports.writeStats = writeStats;
-
 async function writeStats(stats, filepath) {
   return new Promise((resolve, reject) => {
     new StatsSerializeStream(stats).on('end', resolve).on('error', reject).pipe(createWriteStream(filepath));

package/lib/template.js

@@ -2,38 +2,30 @@
 
 /* eslint-disable max-len */
 const path = require('path');
-
 const fs = require('fs');
-
 const {
   escape
 } = require('html-escaper');
-
 const projectRoot = path.resolve(__dirname, '..');
 const assetsRoot = path.join(projectRoot, 'public');
 exports.renderViewer = renderViewer;
+
 /**
  * Escapes `<` characters in JSON to safely use it in `<script>` tag.
  */
-
 function escapeJson(json) {
   return JSON.stringify(json).replace(/</gu, '\\u003c');
 }
-
 function getAssetContent(filename) {
   const assetPath = path.join(assetsRoot, filename);
-
   if (!assetPath.startsWith(assetsRoot)) {
     throw new Error(`"${filename}" is outside of the assets root`);
   }
-
   return fs.readFileSync(assetPath, 'utf8');
 }
-
 function html(strings, ...values) {
   return strings.map((string, index) => `${string}${values[index] || ''}`).join('');
 }
-
 function getScript(filename, mode) {
   if (mode === 'static') {
     return `<!-- ${escape(filename)} -->
@@ -42,13 +34,13 @@ function getScript(filename, mode) {
     return `<script src="${escape(filename)}"></script>`;
   }
 }
-
 function renderViewer({
   title,
   enableWebSocket,
   chartData,
   entrypoints,
   defaultSizes,
+  compressionAlgorithm,
   mode
 } = {}) {
   return html`<!DOCTYPE html>
@@ -71,6 +63,7 @@ function renderViewer({
       window.chartData = ${escapeJson(chartData)};
       window.entrypoints = ${escapeJson(entrypoints)};
       window.defaultSizes = ${escapeJson(defaultSizes)};
+      window.compressionAlgorithm = ${escapeJson(compressionAlgorithm)};
     </script>
   </body>
 </html>`;