Replace all lodash.* packages (#612)

* Replace `lodash.escape` w/ `html-escaper`

* Replace `lodash.flatten` with a small function

* Repalce `lodash.debounce` w/ `debounce`

* Replace `lodash.pullall` w/ Array.prototype.filter

* Chore: add a TODO comment for debounce package replacement

* Replace `lodash.uniqby` w/ Set+filter

* Replace `lodash.invokemap` w/ Object.values

* Fix invokemap replacement

* Update CHANGELOG

Author: SukkaW

CHANGELOG.md

@@ -12,6 +12,9 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 ## UNRELEASED
 
+* **Internal**
+  * Make module much slimmer by replacing all `lodash.*` packages ([#612](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/612)) by [@sukkaw](https://github.com/sukkaw).
+
 ## 4.9.1
 
 * **Internal**

client/components/ModuleItem.jsx

@@ -1,5 +1,5 @@
 import escapeRegExp from 'escape-string-regexp';
-import escape from 'lodash.escape';
+import {escape} from 'html-escaper';
 import filesize from 'filesize';
 import cls from 'classnames';
 

client/components/Search.jsx

@@ -1,4 +1,5 @@
-import debounce from 'lodash.debounce';
+// TODO: switch to a more modern debounce package once we drop Node.js 10 support
+import debounce from 'debounce';
 
 import s from './Search.css';
 import Button from './Button';

package-lock.json

@@ -18,6 +18,7 @@
   "engines": {
     "node": ">= 10.13.0"
   },
+  "packageManager": "[email protected]",
   "scripts": {
     "start": "gulp watch",
     "build": "gulp build",
@@ -36,15 +37,11 @@
     "acorn": "^8.0.4",
     "acorn-walk": "^8.0.0",
     "commander": "^7.2.0",
+    "debounce": "^1.2.1",
     "escape-string-regexp": "^4.0.0",
     "gzip-size": "^6.0.0",
+    "html-escaper": "^2.0.2",
     "is-plain-object": "^5.0.0",
-    "lodash.debounce": "^4.0.8",
-    "lodash.escape": "^4.0.1",
-    "lodash.flatten": "^4.4.0",
-    "lodash.invokemap": "^4.6.0",
-    "lodash.pullall": "^4.2.0",
-    "lodash.uniqby": "^4.7.0",
     "opener": "^1.5.2",
     "picocolors": "^1.0.0",
     "sirv": "^2.0.3",

package.json

@@ -1,11 +1,6 @@
 const fs = require('fs');
 const path = require('path');
 
-const pullAll = require('lodash.pullall');
-const invokeMap = require('lodash.invokemap');
-const uniqBy = require('lodash.uniqby');
-const flatten = require('lodash.flatten');
-
 const gzipSize = require('gzip-size');
 const {parseChunked} = require('@discoveryjs/json-ext');
 
@@ -119,7 +114,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     }
 
     // Picking modules from current bundle script
-    const assetModules = modules.filter(statModule => assetHasModule(statAsset, statModule));
+    let assetModules = modules.filter(statModule => assetHasModule(statAsset, statModule));
 
     // Adding parsed sources
     if (parsedModules) {
@@ -143,7 +138,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
           unparsedEntryModules[0].parsedSrc = assetSources.runtimeSrc;
         } else {
           // If there are multiple entry points we move all of them under synthetic concatenated module.
-          pullAll(assetModules, unparsedEntryModules);
+          assetModules = assetModules.filter(mod => !unparsedEntryModules.includes(mod));
           assetModules.unshift({
             identifier: './entry modules',
             name: './entry modules',
@@ -171,7 +166,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     statSize: asset.tree.size || asset.size,
     parsedSize: asset.parsedSize,
     gzipSize: asset.gzipSize,
-    groups: invokeMap(asset.tree.children, 'toChartData'),
+    groups: Object.values(asset.tree.children).map(i => i.toChartData()),
     isInitialByEntrypoint: chunkToInitialByEntrypoint[filename] ?? {}
   }));
 }
@@ -191,15 +186,23 @@ function getChildAssetBundles(bundleStats, assetName) {
 }
 
 function getBundleModules(bundleStats) {
-  return uniqBy(
-    flatten(
-      ((bundleStats.chunks?.map(chunk => chunk.modules)) || [])
-        .concat(bundleStats.modules)
-        .filter(Boolean)
-    ),
-    'id'
-  // Filtering out Webpack's runtime modules as they don't have ids and can't be parsed (introduced in Webpack 5)
-  ).filter(m => !isRuntimeModule(m));
+  const seenIds = new Set();
+
+  return flatten(
+    ((bundleStats.chunks?.map(chunk => chunk.modules)) || [])
+      .concat(bundleStats.modules)
+      .filter(Boolean)
+  ).filter(mod => {
+    // Filtering out Webpack's runtime modules as they don't have ids and can't be parsed (introduced in Webpack 5)
+    if (isRuntimeModule(mod)) {
+      return false;
+    }
+    if (seenIds.has(mod.id)) {
+      return false;
+    }
+    seenIds.add(mod.id);
+    return true;
+  });
 }
 
 function assetHasModule(statAsset, statModule) {
@@ -239,3 +242,34 @@ function getChunkToInitialByEntrypoint(bundleStats) {
   });
   return chunkToEntrypointInititalMap;
 };
+
+/**
+ * arr-flatten <https://github.com/jonschlinkert/arr-flatten>
+ *
+ * Copyright (c) 2014-2017, Jon Schlinkert.
+ * Released under the MIT License.
+ *
+ * Modified by Sukka <https://skk.moe>
+ *
+ * Replace recursively flatten with one-level deep flatten to match lodash.flatten
+ *
+ * TODO: replace with Array.prototype.flat once Node.js 10 support is dropped
+ */
+function flatten(arr) {
+  if (!arr) return [];
+  const len = arr.length;
+  if (!len) return [];
+
+  let cur;
+
+  const res = [];
+  for (let i = 0; i < len; i++) {
+    cur = arr[i];
+    if (Array.isArray(cur)) {
+      res.push(...cur);
+    } else {
+      res.push(cur);
+    }
+  }
+  return res;
+}

src/analyzer.js

@@ -2,7 +2,7 @@
 const path = require('path');
 const fs = require('fs');
 
-const escape = require('lodash.escape');
+const {escape} = require('html-escaper');
 
 const projectRoot = path.resolve(__dirname, '..');
 const assetsRoot = path.join(projectRoot, 'public');

src/template.js

@@ -1,5 +1,3 @@
-import invokeMap from 'lodash.invokemap';
-
 import Node from './Node';
 
 export default class BaseFolder extends Node {
@@ -111,7 +109,7 @@ export default class BaseFolder extends Node {
       label: this.name,
       path: this.path,
       statSize: this.size,
-      groups: invokeMap(this.children, 'toChartData')
+      groups: Object.values(this.children).map(child => child.toChartData())
     };
   }
 

src/tree/BaseFolder.js

@@ -1,4 +1,3 @@
-import invokeMap from 'lodash.invokemap';
 import Module from './Module';
 import ContentModule from './ContentModule';
 import ContentFolder from './ContentFolder';
@@ -74,14 +73,18 @@ export default class ConcatenatedModule extends Module {
   }
 
   mergeNestedFolders() {
-    invokeMap(this.children, 'mergeNestedFolders');
+    Object.values(this.children).forEach(child => {
+      if (child.mergeNestedFolders) {
+        child.mergeNestedFolders();
+      }
+    });
   }
 
   toChartData() {
     return {
       ...super.toChartData(),
       concatenated: true,
-      groups: invokeMap(this.children, 'toChartData')
+      groups: Object.values(this.children).map(child => child.toChartData())
     };
   }