Reduce the usage of lodash (#505)

* Reduce the usage of lodash

* Add missing comment back

* Update unreleased changelog

* Add missing comment back

* Fix misplaced changelog

* Fix edge cases

* Fix viewer.js tests

* Make ESLint Happy

Author: SukkaW

CHANGELOG.md

@@ -12,6 +12,9 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 ## UNRELEASED
 
+* **Internal**
+  * Replace some lodash usages with JavaScript native API ([#505](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/505)) by [@sukkaw](https://github.com/sukkaw).
+
 ## 4.9.0
 
 * **Improvement**

client/components/ModuleItem.jsx

@@ -73,7 +73,8 @@ export default class ModuleItem extends PureComponent {
   }
 
   get invisibleHint() {
-    return `${_.upperFirst(this.itemType)} is not rendered in the treemap because it's too small.`;
+    const itemType = this.itemType.charAt(0).toUpperCase() + this.itemType.slice(1);
+    return `${itemType} is not rendered in the treemap because it's too small.`;
   }
 
   get isVisible() {

src/analyzer.js

@@ -27,7 +27,10 @@ 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)) {
+  if (
+    (bundleStats.assets == null || bundleStats.assets.length === 0)
+    && bundleStats.children && bundleStats.children.length > 0
+  ) {
     const {children} = bundleStats;
     bundleStats = bundleStats.children[0];
     // Sometimes if there are additional child chunks produced add them as child assets,
@@ -38,7 +41,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
         bundleStats.assets.push(asset);
       });
     }
-  } else if (!_.isEmpty(bundleStats.children)) {
+  } else if (bundleStats.children && bundleStats.children.length > 0) {
     // Sometimes if there are additional child chunks produced add them as child assets
     bundleStats.children.forEach((child) => {
       child.assets.forEach((asset) => {
@@ -59,7 +62,7 @@ function getViewerData(bundleStats, bundleDir, opts) {
     // See #22
     asset.name = asset.name.replace(FILENAME_QUERY_REGEXP, '');
 
-    return FILENAME_EXTENSIONS.test(asset.name) && !_.isEmpty(asset.chunks) && isAssetIncluded(asset.name);
+    return FILENAME_EXTENSIONS.test(asset.name) && asset.chunks.length > 0 && isAssetIncluded(asset.name);
   });
 
   // Trying to parse bundle assets and get real module sizes if `bundleDir` is provided
@@ -82,11 +85,14 @@ function getViewerData(bundleStats, bundleDir, opts) {
         continue;
       }
 
-      bundlesSources[statAsset.name] = _.pick(bundleInfo, 'src', 'runtimeSrc');
+      bundlesSources[statAsset.name] = {
+        src: bundleInfo.src,
+        runtimeSrc: bundleInfo.runtimeSrc
+      };
       Object.assign(parsedModules, bundleInfo.modules);
     }
 
-    if (_.isEmpty(bundlesSources)) {
+    if (Object.keys(bundlesSources).length === 0) {
       bundlesSources = null;
       parsedModules = null;
       logger.warn('\nNo bundles were parsed. Analyzer will show only original module sizes from stats file.\n');
@@ -97,8 +103,10 @@ function getViewerData(bundleStats, bundleDir, opts) {
     // 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');
-    const assetSources = bundlesSources && _.has(bundlesSources, statAsset.name) ?
+    const asset = result[statAsset.name] = {
+      size: statAsset.size
+    };
+    const assetSources = bundlesSources && Object.prototype.hasOwnProperty.call(bundlesSources, statAsset.name) ?
       bundlesSources[statAsset.name] : null;
 
     if (assetSources) {

src/parseUtils.js

@@ -1,5 +1,4 @@
 const fs = require('fs');
-const _ = require('lodash');
 const acorn = require('acorn');
 const walk = require('acorn-walk');
 
@@ -140,14 +139,12 @@ function parseBundle(bundlePath) {
     }
   );
 
-  let modules;
+  const modules = {};
 
   if (walkState.locations) {
-    modules = _.mapValues(walkState.locations,
-      loc => content.slice(loc.start, loc.end)
-    );
-  } else {
-    modules = {};
+    Object.entries(walkState.locations).forEach(([id, loc]) => {
+      modules[id] = content.slice(loc.start, loc.end);
+    });
   }
 
   return {

src/tree/BaseFolder.js

@@ -10,15 +10,15 @@ export default class BaseFolder extends Node {
   }
 
   get src() {
-    if (!_.has(this, '_src')) {
+    if (!Object.prototype.hasOwnProperty.call(this, '_src')) {
       this._src = this.walk((node, src) => (src += node.src || ''), '', false);
     }
 
     return this._src;
   }
 
   get size() {
-    if (!_.has(this, '_size')) {
+    if (!Object.prototype.hasOwnProperty.call(this, '_size')) {
       this._size = this.walk((node, size) => (size + node.size), 0, false);
     }
 

src/tree/ConcatenatedModule.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-
 import Module from './Module';
 import ContentModule from './ContentModule';
 import ContentFolder from './ContentFolder';
@@ -41,7 +40,7 @@ export default class ConcatenatedModule extends Module {
       return;
     }
 
-    const [folders, fileName] = [pathParts.slice(0, -1), _.last(pathParts)];
+    const [folders, fileName] = [pathParts.slice(0, -1), pathParts[pathParts.length - 1]];
     let currentFolder = this;
 
     folders.forEach(folderName => {

src/tree/Folder.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import gzipSize from 'gzip-size';
 
 import Module from './Module';
@@ -13,7 +12,7 @@ export default class Folder extends BaseFolder {
   }
 
   get gzipSize() {
-    if (!_.has(this, '_gzipSize')) {
+    if (!Object.prototype.hasOwnProperty.call(this, '_gzipSize')) {
       this._gzipSize = this.src ? gzipSize.sync(this.src) : 0;
     }
 
@@ -27,7 +26,7 @@ export default class Folder extends BaseFolder {
       return;
     }
 
-    const [folders, fileName] = [pathParts.slice(0, -1), _.last(pathParts)];
+    const [folders, fileName] = [pathParts.slice(0, -1), pathParts[pathParts.length - 1]];
     let currentFolder = this;
 
     folders.forEach(folderName => {

src/tree/Module.js

@@ -1,4 +1,3 @@
-import _ from 'lodash';
 import gzipSize from 'gzip-size';
 
 import Node from './Node';
@@ -40,7 +39,7 @@ export default class Module extends Node {
   }
 
   getGzipSize() {
-    if (!_.has(this, '_gzipSize')) {
+    if (!('_gzipSize' in this)) {
       this._gzipSize = this.src ? gzipSize.sync(this.src) : undefined;
     }
 

src/tree/utils.js

@@ -1,15 +1,13 @@
-import _ from 'lodash';
-
 const MULTI_MODULE_REGEXP = /^multi /u;
 
 export function getModulePathParts(moduleData) {
   if (MULTI_MODULE_REGEXP.test(moduleData.identifier)) {
     return [moduleData.identifier];
   }
 
-  const parsedPath = _
+  const loaders = moduleData.name.split('!');
   // Removing loaders from module path: they're joined by `!` and the last part is a raw module path
-    .last(moduleData.name.split('!'))
+  const parsedPath = loaders[loaders.length - 1]
     // Splitting module path into parts
     .split('/')
     // Removing first `.`

src/utils.js

@@ -1,15 +1,13 @@
 const {inspect, types} = require('util');
-const _ = require('lodash');
 const opener = require('opener');
 
 const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
 exports.createAssetsFilter = createAssetsFilter;
 
 function createAssetsFilter(excludePatterns) {
-  const excludeFunctions = _(excludePatterns)
-    .castArray()
-    .compact()
+  const excludeFunctions = (Array.isArray(excludePatterns) ? excludePatterns : [excludePatterns])
+    .filter(Boolean)
     .map(pattern => {
       if (typeof pattern === 'string') {
         pattern = new RegExp(pattern, 'u');
@@ -26,8 +24,7 @@ function createAssetsFilter(excludePatterns) {
       }
 
       return pattern;
-    })
-    .value();
+    });
 
   if (excludeFunctions.length) {
     return (asset) => excludeFunctions.every(fn => fn(asset) !== true);