webpack-bundle-analyzer 4.6.1 → 4.8.0

package/CHANGELOG.md

@@ -12,6 +12,20 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 ## UNRELEASED
 
+## 4.8.0
+
+ * **Improvement**
+   * Support reading large (>500MB) stats.json files ([#423](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/423) by [@henry-alakazhang](https://github.com/henry-alakazhang))
+   * Improve search UX by graying out non-matches ([#554](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/554) by [@starpit](https://github.com/starpit))
+
+ * **Internal**
+   * Add Node.js v16.x to CI and update GitHub actions ([#539](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/539) by [@amareshsm](https://github.com/amareshsm))
+
+## 4.7.0
+
+ * **New Feature**
+   * Add the ability to filter to displaying only initial chunks per entrypoint ([#519](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/519) by [@pas-trop-de-zele](https://github.com/pas-trop-de-zele))
+
 ## 4.6.1
 
 * **Bug Fix**

package/README.md

@@ -1,6 +1,5 @@
 [![npm][npm]][npm-url]
 [![node][node]][node-url]
-[![deps][deps]][deps-url]
 [![tests][tests]][tests-url]
 [![downloads][downloads]][downloads-url]
 
@@ -58,7 +57,7 @@ new BundleAnalyzerPlugin(options?: object)
 |:--:|:--:|:----------|
 |**`analyzerMode`**|One of: `server`, `static`, `json`, `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 `json` mode single JSON 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}` or `auto`|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. If `analyzerPort` is `auto`, the operating system will assign an arbitrary unused port |
 |**`analyzerUrl`**|`{Function}` called with `{ listenHost: string, listenHost: string, boundAddress: server.address}`. [server.address comes from Node.js](https://nodejs.org/api/net.html#serveraddress)| Default: `http://${listenHost}:${boundAddress.port}`. The URL printed to console with server mode.|
 |**`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.|
@@ -211,9 +210,6 @@ To get more information about it you can read [issue #147](https://github.com/we
 [node]: https://img.shields.io/node/v/webpack-bundle-analyzer.svg
 [node-url]: https://nodejs.org
 
-[deps]: https://david-dm.org/webpack-contrib/webpack-bundle-analyzer.svg
-[deps-url]: https://david-dm.org/webpack-contrib/webpack-bundle-analyzer
-
 [tests]: http://img.shields.io/travis/webpack-contrib/webpack-bundle-analyzer.svg
 [tests-url]: https://travis-ci.org/webpack-contrib/webpack-bundle-analyzer
 

package/lib/analyzer.js

@@ -8,6 +8,10 @@ const _ = require('lodash');
 
 const gzipSize = require('gzip-size');
 
+const {
+  parseChunked
+} = require('@discoveryjs/json-ext');
+
 const Logger = require('./Logger');
 
 const Folder = require('./tree/Folder').default;
@@ -155,22 +159,30 @@ function getViewerData(bundleStats, bundleDir, opts) {
     asset.tree = createModulesTree(asset.modules);
     return result;
   }, {});
-  return Object.entries(assets).map(([filename, asset]) => ({
-    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.
-    // Using `asset.size` only if current asset doesn't contain any modules (resulting size equals 0)
-    statSize: asset.tree.size || asset.size,
-    parsedSize: asset.parsedSize,
-    gzipSize: asset.gzipSize,
-    groups: _.invokeMap(asset.tree.children, 'toChartData')
-  }));
+  const chunkToInitialByEntrypoint = getChunkToInitialByEntrypoint(bundleStats);
+  return Object.entries(assets).map(([filename, asset]) => {
+    var _chunkToInitialByEntr;
+
+    return {
+      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.
+      // Using `asset.size` only if current asset doesn't contain any modules (resulting size equals 0)
+      statSize: asset.tree.size || asset.size,
+      parsedSize: asset.parsedSize,
+      gzipSize: asset.gzipSize,
+      groups: _.invokeMap(asset.tree.children, 'toChartData'),
+      isInitialByEntrypoint: (_chunkToInitialByEntr = chunkToInitialByEntrypoint[filename]) !== null && _chunkToInitialByEntr !== void 0 ? _chunkToInitialByEntr : {}
+    };
+  });
 }
 
 function readStatsFromFile(filename) {
-  return JSON.parse(fs.readFileSync(filename, 'utf8'));
+  return parseChunked(fs.createReadStream(filename, {
+    encoding: 'utf8'
+  }));
 }
 
 function getChildAssetBundles(bundleStats, assetName) {
@@ -200,4 +212,23 @@ function createModulesTree(modules) {
   modules.forEach(module => root.addModule(module));
   root.mergeNestedFolders();
   return root;
-}
+}
+
+function getChunkToInitialByEntrypoint(bundleStats) {
+  if (bundleStats == null) {
+    return {};
+  }
+
+  const chunkToEntrypointInititalMap = {};
+  Object.values(bundleStats.entrypoints || {}).forEach(entrypoint => {
+    for (const asset of entrypoint.assets) {
+      var _chunkToEntrypointIni;
+
+      chunkToEntrypointInititalMap[asset.name] = (_chunkToEntrypointIni = chunkToEntrypointInititalMap[asset.name]) !== null && _chunkToEntrypointIni !== void 0 ? _chunkToEntrypointIni : {};
+      chunkToEntrypointInititalMap[asset.name][entrypoint.name] = true;
+    }
+  });
+  return chunkToEntrypointInititalMap;
+}
+
+;

package/lib/bin/analyzer.js

@@ -64,45 +64,47 @@ if (mode === 'server') {
 if (!SIZES.has(defaultSizes)) showHelp(`Invalid default sizes option. Possible values are: ${[...SIZES].join(', ')}`);
 bundleStatsFile = resolve(bundleStatsFile);
 if (!bundleDir) bundleDir = dirname(bundleStatsFile);
-let bundleStats;
-
-try {
-  bundleStats = analyzer.readStatsFromFile(bundleStatsFile);
-} catch (err) {
-  logger.error(`Couldn't read webpack bundle stats from "${bundleStatsFile}":\n${err}`);
-  logger.debug(err.stack);
-  process.exit(1);
-}
-
-if (mode === 'server') {
-  viewer.startServer(bundleStats, {
-    openBrowser,
-    port,
-    host,
-    defaultSizes,
-    reportTitle,
-    bundleDir,
-    excludeAssets,
-    logger: new Logger(logLevel),
-    analyzerUrl: utils.defaultAnalyzerUrl
-  });
-} else if (mode === 'static') {
-  viewer.generateReport(bundleStats, {
-    openBrowser,
-    reportFilename: resolve(reportFilename || 'report.html'),
-    reportTitle,
-    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)
-  });
+parseAndAnalyse(bundleStatsFile);
+
+async function parseAndAnalyse(bundleStatsFile) {
+  try {
+    const bundleStats = await analyzer.readStatsFromFile(bundleStatsFile);
+
+    if (mode === 'server') {
+      viewer.startServer(bundleStats, {
+        openBrowser,
+        port,
+        host,
+        defaultSizes,
+        reportTitle,
+        bundleDir,
+        excludeAssets,
+        logger: new Logger(logLevel),
+        analyzerUrl: utils.defaultAnalyzerUrl
+      });
+    } else if (mode === 'static') {
+      viewer.generateReport(bundleStats, {
+        openBrowser,
+        reportFilename: resolve(reportFilename || 'report.html'),
+        reportTitle,
+        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)
+      });
+    }
+  } catch (err) {
+    logger.error(`Couldn't read webpack bundle stats from "${bundleStatsFile}":\n${err}`);
+    logger.debug(err.stack);
+    process.exit(1);
+  }
 }
 
 function showHelp(error) {

package/lib/template.js

@@ -45,6 +45,7 @@ function renderViewer({
   title,
   enableWebSocket,
   chartData,
+  entrypoints,
   defaultSizes,
   mode
 } = {}) {
@@ -66,6 +67,7 @@ function renderViewer({
     <div id="app"></div>
     <script>
       window.chartData = ${escapeJson(chartData)};
+      window.entrypoints = ${escapeJson(entrypoints)};
       window.defaultSizes = ${escapeJson(defaultSizes)};
     </script>
   </body>

package/lib/viewer.js

@@ -42,6 +42,7 @@ module.exports = {
   startServer,
   generateReport,
   generateJSONReport,
+  getEntrypoints,
   // deprecated
   start: startServer
 };
@@ -63,6 +64,7 @@ async function startServer(bundleStats, opts) {
     excludeAssets
   };
   let chartData = getChartData(analyzerOpts, bundleStats, bundleDir);
+  const entrypoints = getEntrypoints(bundleStats);
   if (!chartData) return;
   const sirvMiddleware = sirv(`${projectRoot}/public`, {
     // disables caching and traverse the file system on every request
@@ -74,6 +76,7 @@ async function startServer(bundleStats, opts) {
         mode: 'server',
         title: resolveTitle(reportTitle),
         chartData,
+        entrypoints,
         defaultSizes,
         enableWebSocket: true
       });
@@ -145,11 +148,13 @@ async function generateReport(bundleStats, opts) {
     logger,
     excludeAssets
   }, bundleStats, bundleDir);
+  const entrypoints = getEntrypoints(bundleStats);
   if (!chartData) return;
   const reportHtml = renderViewer({
     mode: 'static',
     title: resolveTitle(reportTitle),
     chartData,
+    entrypoints,
     defaultSizes,
     enableWebSocket: false
   });
@@ -204,4 +209,12 @@ function getChartData(analyzerOpts, ...args) {
   }
 
   return chartData;
+}
+
+function getEntrypoints(bundleStats) {
+  if (bundleStats === null || bundleStats === undefined) {
+    return [];
+  }
+
+  return Object.values(bundleStats.entrypoints || {}).map(entrypoint => entrypoint.name);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webpack-bundle-analyzer",
-  "version": "4.6.1",
+  "version": "4.8.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",
@@ -32,6 +32,7 @@
     "lib"
   ],
   "dependencies": {
+    "@discoveryjs/json-ext": "0.5.7",
     "acorn": "^8.0.4",
     "acorn-walk": "^8.0.0",
     "chalk": "^4.1.0",
@@ -84,7 +85,7 @@
     "url-loader": "4.1.1",
     "webpack": "5.37.1",
     "webpack-cli": "3.3.12",
-    "webpack-dev-server": "3.11.2"
+    "webpack-dev-server": "3.11.3"
   },
   "keywords": [
     "webpack",