webpack-bundle-analyzer 3.1.0 → 3.3.2

package/CHANGELOG.md

@@ -14,21 +14,48 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 <!-- Add changelog entries for new changes under this section -->
 
+## 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**
+   * Use relative links for serving internal assets ([#261](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/261), fixes [#254](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/254))
+   * Properly escape embedded JS/JSON ([#262](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/262))
+
+ * **Bug Fix**
+   * Fix showing help message on `-h` flag ([#260](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/260), fixes [#239](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/239))
+
+## 3.3.0
+
+ * **New Feature**
+   * Show/hide chunks using context menu ([#246](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/246), [@bregenspan](https://github.com/bregenspan))
+
+ * **Internal**
+   * Updated dev dependencies
+
+## 3.2.0
+
+ * **Improvements**
+   * Add support for .mjs output files ([#252](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/252), [@jlopezxs](https://github.com/jlopezxs))
+
 ## 3.1.0
 
-* **Bug Fix**
-  * Properly determine the size of the modules containing special characters ([#223](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/223), [@hulkish](https://github.com/hulkish))
-  * Update acorn to v6 ([#248](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/248), [@realityking](https://github.com/realityking))
+ * **Bug Fix**
+   * Properly determine the size of the modules containing special characters ([#223](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/223), [@hulkish](https://github.com/hulkish))
+   * Update acorn to v6 ([#248](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/248), [@realityking](https://github.com/realityking))
 
 ## 3.0.4
 
-* **Bug Fix**
-  * Make webpack's done hook wait until analyzer writes report or stat file ([#247](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/247), [@mareolan](https://github.com/mareolan))
+ * **Bug Fix**
+   * Make webpack's done hook wait until analyzer writes report or stat file ([#247](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/247), [@mareolan](https://github.com/mareolan))
 
 ## 3.0.3
 
-* **Bug Fix**
-  * Disable viewer websocket connection when report is generated in `static` mode ([#215](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/215), [@sebastianhaeni](https://github.com/sebastianhaeni))
+ * **Bug Fix**
+   * Disable viewer websocket connection when report is generated in `static` mode ([#215](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/215), [@sebastianhaeni](https://github.com/sebastianhaeni))
 
 ## 3.0.2
 

package/README.md

@@ -148,23 +148,23 @@ as Uglify, then this value will reflect the minified size of your code.
 
 This is the size of running the parsed bundles/modules through gzip compression.
 
-<h2 align="center">Troubleshooting</h2>
+<h2 align="center">Selecting Which Chunks to Display</h2>
 
-### I can't see all the dependencies in a chunk
+When opened, the report displays all of the Webpack chunks for your project. It's possible to filter to a more specific list of chunks by using the sidebar or the chunk context menu.
 
-This is a known caveat when `webpack.optimize.ModuleConcatenationPlugin` is used with `Webpack 3` or `webpack-bundle-analyzer < 2.11.0`.
-The way `ModuleConcatenationPlugin` works is that it merges multiple modules into a single one, and so that resulting module doesn't have edges anymore.
-`Webpack 3` didn't provide any information about concatenated modules, but `Webpack 4` started including it into a `stats` files and `webpack-bundle-analyzer 2.11.0` learned to show it.
+### Sidebar
 
-If for some reason you can't update to the latest versions try analyzing your bundle without `ModuleConcatenationPlugin`. See [issue #115](https://github.com/webpack-contrib/webpack-bundle-analyzer/issues/115) for more discussion.
+The Sidebar Menu can be opened by clicking the `>` button at the top left of the report. You can select or deselect chunks to display under the "Show chunks" heading there.
 
-If you are using `Angular CLI < 6.0.0` (which is based on `Webpack 3` and uses `ModuleConcatenationPlugin`) you can build your project using the following command:
-```
-ng build --stats-json --build-optimizer=false --vendor-chunk=true
-```
-The resulting stats.json can be found at `dist/stats.json`
+### Chunk Context Menu
 
-*Please be aware, that this is not a reasonable build for production use, as it increases the build output size considerably.*
+The Chunk Context Menu can be opened by right-clicking or `Ctrl`-clicking on a specific chunk in the report. It provides the following options:
+
+ * **Hide chunk:** Hides the selected chunk
+ * **Hide all other chunks:** Hides all chunks besides the selected one
+ * **Show all chunks:** Un-hides any hidden chunks, returning the report to its initial, unfiltered view
+
+<h2 align="center">Troubleshooting</h2>
 
 ### I don't see `gzip` or `parsed` sizes, it only shows `stat` size
 

package/lib/analyzer.js

@@ -20,7 +20,8 @@ const {
   createAssetsFilter
 } = require('./utils');
 
-const FILENAME_QUERY_REGEXP = /\?.*$/;
+const FILENAME_QUERY_REGEXP = /\?[\0-\t\x0B\f\x0E-\u2027\u202A-\u{10FFFF}]*$/u;
+const FILENAME_EXTENSIONS = /\.(js|mjs)$/iu;
 module.exports = {
   getViewerData,
   readStatsFromFile
@@ -35,14 +36,14 @@ function getViewerData(bundleStats, bundleDir, opts) {
 
   if (_.isEmpty(bundleStats.assets) && !_.isEmpty(bundleStats.children)) {
     bundleStats = bundleStats.children[0];
-  } // Picking only `*.js` assets from bundle that has non-empty `chunks` array
+  } // Picking only `*.js or *.mjs` assets from bundle that has non-empty `chunks` array
 
 
   bundleStats.assets = _.filter(bundleStats.assets, asset => {
     // Removing query part from filename (yes, somebody uses it for some reason and Webpack supports it)
     // See #22
     asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, '');
-    return _.endsWith(asset.name, '.js') && !_.isEmpty(asset.chunks) && isAssetIncluded(asset.name);
+    return FILENAME_EXTENSIONS.test(asset.name) && !_.isEmpty(asset.chunks) && isAssetIncluded(asset.name);
   }); // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided
 
   let bundlesSources = null;
@@ -98,6 +99,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
   return _.transform(assets, (result, asset, filename) => {
     result.push({
       label: filename,
+      isAsset: true,
       // Not using `asset.size` here provided by Webpack because it can be very confusing when `UglifyJsPlugin` is used.
       // In this case all module sizes from stats file will represent unminified module sizes, but `asset.size` will
       // be the size of minified bundle.

package/lib/bin/analyzer.js

@@ -28,7 +28,9 @@ 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` 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('-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);
+                     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);
 let {
   mode,
   host,
@@ -80,7 +82,7 @@ if (mode === 'server') {
 }
 
 function showHelp(error) {
-  if (error) console.log(`\n  ${magenta(error)}`);
+  if (error) console.log(`\n  ${magenta(error)}\n`);
   program.outputHelp();
   process.exit(1);
 }

package/lib/tree/utils.js

@@ -9,7 +9,7 @@ var _lodash = _interopRequireDefault(require("lodash"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const MULTI_MODULE_REGEXP = /^multi /;
+const MULTI_MODULE_REGEXP = /^multi /u;
 
 function getModulePathParts(moduleData) {
   if (MULTI_MODULE_REGEXP.test(moduleData.identifier)) {

package/lib/utils.js

@@ -11,7 +11,7 @@ exports.createAssetsFilter = createAssetsFilter;
 function createAssetsFilter(excludePatterns) {
   const excludeFunctions = _(excludePatterns).castArray().compact().map(pattern => {
     if (typeof pattern === 'string') {
-      pattern = new RegExp(pattern);
+      pattern = new RegExp(pattern, 'u');
     }
 
     if (_.isRegExp(pattern)) {

package/lib/viewer.js

@@ -31,6 +31,7 @@ const Logger = require('./Logger');
 const analyzer = require('./analyzer');
 
 const projectRoot = path.resolve(__dirname, '..');
+const assetsRoot = path.join(projectRoot, 'public');
 module.exports = {
   startServer,
   generateReport,
@@ -71,11 +72,13 @@ function _startServer() {
         mode: 'server',
 
         get chartData() {
-          return JSON.stringify(chartData);
+          return chartData;
         },
 
-        defaultSizes: JSON.stringify(defaultSizes),
-        enableWebSocket: true
+        defaultSizes,
+        enableWebSocket: true,
+        // Helpers
+        escapeJson
       });
     });
     const server = http.createServer(app);
@@ -145,10 +148,12 @@ function _generateReport() {
     yield new Promise((resolve, reject) => {
       ejs.renderFile(`${projectRoot}/views/viewer.ejs`, {
         mode: 'static',
-        chartData: JSON.stringify(chartData),
+        chartData,
+        defaultSizes,
+        enableWebSocket: false,
+        // Helpers
         assetContent: getAssetContent,
-        defaultSizes: JSON.stringify(defaultSizes),
-        enableWebSocket: false
+        escapeJson
       }, (err, reportHtml) => {
         try {
           if (err) {
@@ -177,7 +182,21 @@ function _generateReport() {
 }
 
 function getAssetContent(filename) {
-  return fs.readFileSync(`${projectRoot}/public/${filename}`, 'utf8');
+  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');
+}
+/**
+ * Escapes `<` characters in JSON to safely use it in `<script>` tag.
+ */
+
+
+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.1.0",
+  "version": "3.3.2",
   "description": "Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap",
   "author": "Yury Grunin <grunin.ya@ya.ru>",
   "license": "MIT",
@@ -48,45 +48,46 @@
     "ws": "^6.0.0"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0",
-    "@babel/plugin-proposal-class-properties": "7.0.0",
-    "@babel/plugin-proposal-decorators": "7.0.0",
-    "@babel/plugin-transform-runtime": "7.0.0",
-    "@babel/polyfill": "7.0.0",
-    "@babel/preset-env": "7.0.0",
+    "@babel/core": "7.4.3",
+    "@babel/plugin-proposal-class-properties": "7.4.0",
+    "@babel/plugin-proposal-decorators": "7.4.0",
+    "@babel/plugin-transform-runtime": "7.4.3",
+    "@babel/polyfill": "7.4.3",
+    "@babel/preset-env": "7.4.3",
     "@babel/preset-react": "7.0.0",
-    "@babel/register": "7.0.0",
-    "@babel/runtime": "7.0.0",
-    "babel-eslint": "9.0.0",
-    "babel-loader": "8.0.2",
+    "@babel/register": "7.4.0",
+    "@babel/runtime": "7.4.3",
+    "babel-eslint": "10.0.1",
+    "babel-loader": "8.0.5",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "4.1.2",
+    "chai": "4.2.0",
     "chai-subset": "1.6.0",
     "classnames": "2.2.6",
-    "css-loader": "1.0.0",
-    "cssnano": "4.1.0",
-    "del": "3.0.0",
-    "eslint": "4.16.0",
-    "eslint-config-th0r": "1.0.1",
-    "eslint-config-th0r-react": "1.0.1",
-    "eslint-plugin-react": "7.6.1",
+    "core-js": "2.6.5",
+    "css-loader": "2.1.1",
+    "cssnano": "4.1.10",
+    "del": "4.1.0",
+    "eslint": "5.16.0",
+    "eslint-config-th0r": "2.0.0",
+    "eslint-config-th0r-react": "2.0.0",
+    "eslint-plugin-react": "7.12.4",
     "exports-loader": "0.7.0",
     "gulp": "4.0.0",
     "gulp-babel": "8.0.0",
-    "mobx": "5.1.0",
+    "mobx": "5.9.4",
     "mobx-preact": "3.0.0",
-    "mocha": "5.2.0",
+    "mocha": "6.1.2",
     "nightmare": "3.0.1",
-    "postcss-icss-values": "2.0.1",
+    "postcss-icss-values": "2.0.2",
     "postcss-loader": "3.0.0",
-    "preact": "8.3.1",
+    "preact": "8.4.2",
     "stream-combiner2": "1.1.1",
-    "style-loader": "0.23.0",
-    "uglifyjs-webpack-plugin": "1.3.0",
-    "url-loader": "1.1.1",
-    "webpack": "4.18.0",
-    "webpack-cli": "3.1.0",
-    "webpack-dev-server": "3.1.8"
+    "style-loader": "0.23.1",
+    "terser-webpack-plugin": "1.2.3",
+    "url-loader": "1.1.2",
+    "webpack": "4.29.6",
+    "webpack-cli": "3.3.0",
+    "webpack-dev-server": "3.3.1"
   },
   "keywords": [
     "webpack",