webpack-bundle-analyzer 3.8.0 → 3.9.0

package/CHANGELOG.md

@@ -14,6 +14,14 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 <!-- Add changelog entries for new changes under this section -->
 
+## 3.9.0
+
+ * **New Feature**
+   * Adds option `reportTitle` to set title in HTML reports; default remains date of report generation ([#354](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/354) by [@eoingroat](https://github.com/eoingroat))
+   
+ * **Improvement**
+    * Added capability to parse bundles that have child assets generated ([#376](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/376) by [@masterkidan](https://github.com/masterkidan) and [#378](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/378) by [@https://github.com/dabbott](https://github.com/https://github.com/dabbott))
+
 ## 3.8.0
 
  * **Improvement**

package/README.md

@@ -60,6 +60,7 @@ new BundleAnalyzerPlugin(options?: object)
 |**`analyzerHost`**|`{String}`|Default: `127.0.0.1`. Host that will be used in `server` mode to start HTTP server.|
 |**`analyzerPort`**|`{Number}` or `auto`|Default: `8888`. Port that will be used in `server` mode to start HTTP server.|
 |**`reportFilename`**|`{String}`|Default: `report.html`. Path to bundle report file that will be generated in `static` mode. It can be either an absolute path or a path relative to a bundle output directory (which is output.path in webpack config).|
+|**`reportTitle`**|`{String\|function}`|Default: function that returns pretty printed current date and time. Content of the HTML `title` element; or a function of the form `() => string` that provides the content.|
 |**`defaultSizes`**|One of: `stat`, `parsed`, `gzip`|Default: `parsed`. Module sizes to show in report by default. [Size definitions](#size-definitions) section describes what these values mean.|
 |**`openAnalyzer`**|`{Boolean}`|Default: `true`. Automatically open report in default browser.|
 |**`generateStatsFile`**|`{Boolean}`|Default: `false`. If `true`, webpack stats JSON file will be generated in bundle output directory|
@@ -118,6 +119,7 @@ Directory containing all generated bundles.
   -h, --host <host>           Host that will be used in `server` mode to start HTTP server. (default: 127.0.0.1)
   -p, --port <n>              Port that will be used in `server` mode to start HTTP server. Should be a number or `auto` (default: 8888)
   -r, --report <file>         Path to bundle report file that will be generated in `static` mode. (default: report.html)
+  -t, --title <title>         String to use in title element of html report. (default: pretty printed current date)
   -s, --default-sizes <type>  Module sizes to show in treemap by default.
                               Possible values: stat, parsed, gzip (default: parsed)
   -O, --no-open               Don't open report in default browser automatically.

package/lib/BundleAnalyzerPlugin.js

@@ -24,12 +24,15 @@ const Logger = require('./Logger');
 
 const viewer = require('./viewer');
 
+const utils = require('./utils');
+
 class BundleAnalyzerPlugin {
   constructor(opts = {}) {
     this.opts = _objectSpread({
       analyzerMode: 'server',
       analyzerHost: '127.0.0.1',
       reportFilename: null,
+      reportTitle: utils.defaultTitle,
       defaultSizes: 'parsed',
       openAnalyzer: true,
       generateStatsFile: false,
@@ -128,6 +131,7 @@ class BundleAnalyzerPlugin {
           openBrowser: _this2.opts.openAnalyzer,
           host: _this2.opts.analyzerHost,
           port: _this2.opts.analyzerPort,
+          reportTitle: _this2.opts.reportTitle,
           bundleDir: _this2.getBundleDirFromCompiler(),
           logger: _this2.logger,
           defaultSizes: _this2.opts.defaultSizes,
@@ -157,6 +161,7 @@ class BundleAnalyzerPlugin {
       yield viewer.generateReport(stats, {
         openBrowser: _this4.opts.openAnalyzer,
         reportFilename: path.resolve(_this4.compiler.outputPath, _this4.opts.reportFilename || 'report.html'),
+        reportTitle: _this4.opts.reportTitle,
         bundleDir: _this4.getBundleDirFromCompiler(),
         logger: _this4.logger,
         defaultSizes: _this4.opts.defaultSizes,

package/lib/analyzer.js

@@ -35,7 +35,26 @@ function getViewerData(bundleStats, bundleDir, opts) {
   const isAssetIncluded = createAssetsFilter(excludeAssets); // Sometimes all the information is located in `children` array (e.g. problem in #10)
 
   if (_.isEmpty(bundleStats.assets) && !_.isEmpty(bundleStats.children)) {
-    bundleStats = bundleStats.children[0];
+    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
 
 
@@ -77,9 +96,11 @@ 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)) {
@@ -116,6 +137,10 @@ function readStatsFromFile(filename) {
   return JSON.parse(fs.readFileSync(filename, 'utf8'));
 }
 
+function getChildAssetBundles(bundleStats, assetName) {
+  return _.find(bundleStats.children, c => _(c.assetsByChunkName).values().flatten().includes(assetName));
+}
+
 function getBundleModules(bundleStats) {
   return _(bundleStats.chunks).map('modules').concat(bundleStats.modules).compact().flatten().uniqBy('id').value();
 }

package/lib/bin/analyzer.js

@@ -20,6 +20,8 @@ const viewer = require('../viewer');
 
 const Logger = require('../Logger');
 
+const utils = require('../utils');
+
 const SIZES = new Set(['stat', 'parsed', 'gzip']);
 const program = commander.version(require('../../package.json').version).usage(`<bundleStatsFile> [bundleDir] [options]
 
@@ -30,12 +32,13 @@ const program = commander.version(require('../../package.json').version).usage(`
                      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('-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);
+'-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);
 let {
   mode,
   host,
   port,
   report: reportFilename,
+  title: reportTitle,
   defaultSizes,
   logLevel,
   open: openBrowser,
@@ -43,6 +46,11 @@ let {
   args: [bundleStatsFile, bundleDir]
 } = 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' && mode !== 'json') {
@@ -74,6 +82,7 @@ if (mode === 'server') {
     port,
     host,
     defaultSizes,
+    reportTitle,
     bundleDir,
     excludeAssets,
     logger: new Logger(logLevel)
@@ -82,6 +91,7 @@ if (mode === 'server') {
   viewer.generateReport(bundleStats, {
     openBrowser,
     reportFilename: resolve(reportFilename || 'report.html'),
+    reportTitle,
     defaultSizes,
     bundleDir,
     excludeAssets,

package/lib/utils.js

@@ -40,12 +40,13 @@ function createAssetsFilter(excludePatterns) {
  * */
 
 
-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 = `0${time.getHours()}`.slice(-2);
   const minute = `0${time.getMinutes()}`.slice(-2);
-  return `${day} ${month} ${year} at ${hour}:${minute}`;
+  const currentTime = `${day} ${month} ${year} at ${hour}:${minute}`;
+  return `${process.env.npm_package_name || 'Webpack Bundle Analyzer'} [${currentTime}]`;
 };

package/lib/viewer.js

@@ -26,14 +26,21 @@ 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,
@@ -41,7 +48,6 @@ module.exports = {
   // deprecated
   start: startServer
 };
-const title = `${process.env.npm_package_name || 'Webpack Bundle Analyzer'} [${utils.getCurrentTime()}]`;
 
 function startServer(_x, _x2) {
   return _startServer.apply(this, arguments);
@@ -56,7 +62,8 @@ function _startServer() {
       bundleDir = null,
       logger = new Logger(),
       defaultSizes = 'parsed',
-      excludeAssets = null
+      excludeAssets = null,
+      reportTitle
     } = opts || {};
     const analyzerOpts = {
       logger,
@@ -74,7 +81,7 @@ function _startServer() {
     app.use('/', (req, res) => {
       res.render('viewer', {
         mode: 'server',
-        title,
+        title: resolveTitle(reportTitle),
 
         get chartData() {
           return chartData;
@@ -140,6 +147,7 @@ function _generateReport() {
     const {
       openBrowser = true,
       reportFilename,
+      reportTitle,
       bundleDir = null,
       logger = new Logger(),
       defaultSizes = 'parsed',
@@ -153,7 +161,7 @@ function _generateReport() {
     yield new Promise((resolve, reject) => {
       ejs.renderFile(`${projectRoot}/views/viewer.ejs`, {
         mode: 'static',
-        title,
+        title: resolveTitle(reportTitle),
         chartData,
         defaultSizes,
         enableWebSocket: false,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-bundle-analyzer",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap",
   "author": "Yury Grunin <grunin.ya@ya.ru>",
   "license": "MIT",
@@ -42,7 +42,7 @@
     "express": "^4.16.3",
     "filesize": "^3.6.1",
     "gzip-size": "^5.0.0",
-    "lodash": "^4.17.15",
+    "lodash": "^4.17.19",
     "mkdirp": "^0.5.1",
     "opener": "^1.5.1",
     "ws": "^6.0.0"

package/src/BundleAnalyzerPlugin.js

@@ -5,6 +5,7 @@ const {bold} = require('chalk');
 
 const Logger = require('./Logger');
 const viewer = require('./viewer');
+const utils = require('./utils');
 
 class BundleAnalyzerPlugin {
   constructor(opts = {}) {
@@ -12,6 +13,7 @@ class BundleAnalyzerPlugin {
       analyzerMode: 'server',
       analyzerHost: '127.0.0.1',
       reportFilename: null,
+      reportTitle: utils.defaultTitle,
       defaultSizes: 'parsed',
       openAnalyzer: true,
       generateStatsFile: false,
@@ -108,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,
@@ -129,6 +132,7 @@ class BundleAnalyzerPlugin {
     await viewer.generateReport(stats, {
       openBrowser: this.opts.openAnalyzer,
       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']);
 
@@ -48,6 +49,10 @@ const program = commander
     '-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.' +
@@ -77,6 +82,7 @@ let {
   host,
   port,
   report: reportFilename,
+  title: reportTitle,
   defaultSizes,
   logLevel,
   open: openBrowser,
@@ -85,6 +91,10 @@ 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' && mode !== 'json') {
   showHelp('Invalid mode. Should be either `server`, `static` or `json`.');
@@ -116,6 +126,7 @@ if (mode === 'server') {
     port,
     host,
     defaultSizes,
+    reportTitle,
     bundleDir,
     excludeAssets,
     logger: new Logger(logLevel)
@@ -124,6 +135,7 @@ if (mode === 'server') {
   viewer.generateReport(bundleStats, {
     openBrowser,
     reportFilename: resolve(reportFilename || 'report.html'),
+    reportTitle,
     defaultSizes,
     bundleDir,
     excludeAssets,

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 = `0${time.getHours()}`.slice(-2);
   const minute = `0${time.getMinutes()}`.slice(-2);
-  return `${day} ${month} ${year} at ${hour}:${minute}`;
+
+  const currentTime = `${day} ${month} ${year} at ${hour}:${minute}`;
+
+  return `${process.env.npm_package_name || 'Webpack Bundle Analyzer'} [${currentTime}]`;
 };

package/src/viewer.js

@@ -10,13 +10,20 @@ 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,
@@ -25,8 +32,6 @@ module.exports = {
   start: startServer
 };
 
-const title = `${process.env.npm_package_name || 'Webpack Bundle Analyzer'} [${utils.getCurrentTime()}]`;
-
 async function startServer(bundleStats, opts) {
   const {
     port = 8888,
@@ -35,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};
@@ -56,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,
@@ -123,6 +129,7 @@ async function generateReport(bundleStats, opts) {
   const {
     openBrowser = true,
     reportFilename,
+    reportTitle,
     bundleDir = null,
     logger = new Logger(),
     defaultSizes = 'parsed',
@@ -138,7 +145,7 @@ async function generateReport(bundleStats, opts) {
       `${projectRoot}/views/viewer.ejs`,
       {
         mode: 'static',
-        title,
+        title: resolveTitle(reportTitle),
         chartData,
         defaultSizes,
         enableWebSocket: false,