webpack-bundle-analyzer 3.3.1 → 3.5.0

package/CHANGELOG.md

@@ -14,6 +14,33 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 <!-- Add changelog entries for new changes under this section -->
 
+## 3.5.0
+
+ * **Improvements**
+   * Improved report title and added favicon ([#310](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/310), [@gaokun](https://github.com/gaokun))
+
+## 3.4.1
+
+ * **Bug Fix**
+  * Fix regression of requiring an object to be passed to `new BundleAnalyzerPlugin()` (issue [#300](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/300), fixed in [#302](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/302) by [@jerryOnlyZRJ](https://github.com/jerryOnlyZRJ))
+
+## 3.4.0
+
+ * **Improvements**
+   * Add `port: 'auto'` option ([#290](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/290), [@avin-kavish](https://github.com/avin-kavish))
+
+ * **Bug Fix**
+   * Avoid mutation of the generated `stats.json` ([#293](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/293), [@wood1986](https://github.com/wood1986))
+
+ * **Internal**
+   * Use Autoprefixer ([#266](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/266), [@bregenspan](https://github.com/bregenspan))
+   * Detect `AsyncMFS` to support dev-server of Nuxt 2.5 and above ([#275](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/275), [@amoshydra](https://github.com/amoshydra))
+
+## 3.3.2
+
+ * **Bug Fix**
+   * Fix regression with escaping internal assets ([#264](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/264), fixes [#263](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/263))
+
 ## 3.3.1
 
  * **Improvements**

package/README.md

@@ -58,7 +58,7 @@ new BundleAnalyzerPlugin(options?: object)
 |:--:|:--:|:----------|
 |**`analyzerMode`**|One of: `server`, `static`, `disabled`|Default: `server`. In `server` mode analyzer will start HTTP server to show bundle report. In `static` mode single HTML file with bundle report will be generated. In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`. |
 |**`analyzerHost`**|`{String}`|Default: `127.0.0.1`. Host that will be used in `server` mode to start HTTP server.|
-|**`analyzerPort`**|`{Number}`|Default: `8888`. Port 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).|
 |**`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.|
@@ -115,7 +115,7 @@ Directory containing all generated bundles.
                               In `server` mode analyzer will start HTTP server to show bundle report.
                               In `static` mode single HTML file with bundle report will be generated. (default: server)
   -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. (default: 8888)
+  -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)
   -s, --default-sizes <type>  Module sizes to show in treemap by default.
                               Possible values: stat, parsed, gzip (default: parsed)

package/lib/BundleAnalyzerPlugin.js

@@ -4,7 +4,9 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -23,11 +25,10 @@ const Logger = require('./Logger');
 const viewer = require('./viewer');
 
 class BundleAnalyzerPlugin {
-  constructor(opts) {
+  constructor(opts = {}) {
     this.opts = _objectSpread({
       analyzerMode: 'server',
       analyzerHost: '127.0.0.1',
-      analyzerPort: 8888,
       reportFilename: 'report.html',
       defaultSizes: 'parsed',
       openAnalyzer: true,
@@ -38,7 +39,9 @@ class BundleAnalyzerPlugin {
       logLevel: 'info',
       // deprecated
       startAnalyzer: true
-    }, opts);
+    }, opts, {
+      analyzerPort: 'analyzerPort' in opts ? opts.analyzerPort === 'auto' ? 0 : opts.analyzerPort : 8888
+    });
     this.server = null;
     this.logger = new Logger(this.opts.logLevel);
   }
@@ -49,11 +52,10 @@ class BundleAnalyzerPlugin {
     const done = (stats, callback) => {
       callback = callback || (() => {});
 
-      stats = stats.toJson(this.opts.statsOptions);
       const actions = [];
 
       if (this.opts.generateStatsFile) {
-        actions.push(() => this.generateStatsFile(stats));
+        actions.push(() => this.generateStatsFile(stats.toJson(this.opts.statsOptions)));
       } // Handling deprecated `startAnalyzer` flag
 
 
@@ -62,9 +64,9 @@ class BundleAnalyzerPlugin {
       }
 
       if (this.opts.analyzerMode === 'server') {
-        actions.push(() => this.startAnalyzerServer(stats));
+        actions.push(() => this.startAnalyzerServer(stats.toJson()));
       } else if (this.opts.analyzerMode === 'static') {
-        actions.push(() => this.generateStaticReport(stats));
+        actions.push(() => this.generateStaticReport(stats.toJson()));
       }
 
       if (actions.length) {
@@ -151,7 +153,18 @@ class BundleAnalyzerPlugin {
   }
 
   getBundleDirFromCompiler() {
-    return this.compiler.outputFileSystem.constructor.name === 'MemoryFileSystem' ? null : this.compiler.outputPath;
+    switch (this.compiler.outputFileSystem.constructor.name) {
+      case 'MemoryFileSystem':
+        return null;
+      // Detect AsyncMFS used by Nuxt 2.5 that replaces webpack's MFS during development
+      // Related: #274
+
+      case 'AsyncMFS':
+        return null;
+
+      default:
+        return this.compiler.outputPath;
+    }
   }
 
 }

package/lib/bin/analyzer.js

@@ -30,7 +30,7 @@ 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` 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.'), '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.', Number, 8888).option('-r, --report <file>', '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(', ')}`), '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.', 'report.html').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,
@@ -45,8 +45,13 @@ 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' && !host) showHelp('Invalid host name');
-if (mode === 'server' && isNaN(port)) showHelp('Invalid port number');
+
+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 (!SIZES.has(defaultSizes)) showHelp(`Invalid default sizes option. Possible values are: ${[...SIZES].join(', ')}`);
 bundleStatsFile = resolve(bundleStatsFile);
 if (!bundleDir) bundleDir = dirname(bundleStatsFile);

package/lib/tree/ConcatenatedModule.js

@@ -17,7 +17,9 @@ var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 

package/lib/tree/ContentFolder.js

@@ -9,7 +9,9 @@ var _BaseFolder = _interopRequireDefault(require("./BaseFolder"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 

package/lib/tree/ContentModule.js

@@ -9,7 +9,9 @@ var _Module = _interopRequireDefault(require("./Module"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 

package/lib/tree/Folder.js

@@ -19,7 +19,9 @@ var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 

package/lib/utils.js

@@ -6,6 +6,7 @@ const {
 
 const _ = require('lodash');
 
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 exports.createAssetsFilter = createAssetsFilter;
 
 function createAssetsFilter(excludePatterns) {
@@ -32,4 +33,19 @@ function createAssetsFilter(excludePatterns) {
   } else {
     return () => true;
   }
-}
+}
+/**
+ * @desc get string of current time
+ * format: dd/MMM HH:mm
+ * */
+
+
+exports.getCurrentTime = 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}`;
+};

package/lib/viewer.js

@@ -26,6 +26,8 @@ const {
   bold
 } = require('chalk');
 
+const utils = require('./utils');
+
 const Logger = require('./Logger');
 
 const analyzer = require('./analyzer');
@@ -38,6 +40,7 @@ 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);
@@ -70,15 +73,16 @@ function _startServer() {
     app.use('/', (req, res) => {
       res.render('viewer', {
         mode: 'server',
+        title,
 
         get chartData() {
-          return JSON.stringify(chartData);
+          return chartData;
         },
 
-        defaultSizes: JSON.stringify(defaultSizes),
+        defaultSizes,
         enableWebSocket: true,
         // Helpers
-        escapeScript
+        escapeJson
       });
     });
     const server = http.createServer(app);
@@ -148,12 +152,13 @@ function _generateReport() {
     yield new Promise((resolve, reject) => {
       ejs.renderFile(`${projectRoot}/views/viewer.ejs`, {
         mode: 'static',
-        chartData: JSON.stringify(chartData),
-        defaultSizes: JSON.stringify(defaultSizes),
+        title,
+        chartData,
+        defaultSizes,
         enableWebSocket: false,
         // Helpers
         assetContent: getAssetContent,
-        escapeScript
+        escapeJson
       }, (err, reportHtml) => {
         try {
           if (err) {
@@ -191,12 +196,12 @@ function getAssetContent(filename) {
   return fs.readFileSync(assetPath, 'utf8');
 }
 /**
- * Escapes `<` characters in the string to safely use it in `<script>` tag.
+ * Escapes `<` characters in JSON to safely use it in `<script>` tag.
  */
 
 
-function escapeScript(value) {
-  return String(value).replace(/</gu, '\\u003c');
+function escapeJson(json) {
+  return JSON.stringify(json).replace(/</gu, '\\u003c');
 }
 
 function getChartData(analyzerOpts, ...args) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-bundle-analyzer",
-  "version": "3.3.1",
+  "version": "3.5.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.10",
+    "lodash": "^4.17.15",
     "mkdirp": "^0.5.1",
     "opener": "^1.5.1",
     "ws": "^6.0.0"
@@ -57,6 +57,7 @@
     "@babel/preset-react": "7.0.0",
     "@babel/register": "7.4.0",
     "@babel/runtime": "7.4.3",
+    "autoprefixer": "9.5.1",
     "babel-eslint": "10.0.1",
     "babel-loader": "8.0.5",
     "babel-plugin-lodash": "3.3.4",