Remove unnecessary lodash usage from bundles (#1718)

* Use lodash-es instead of lodash in extension Produces (slightly) smaller bundles * Use lodash-es instead of lodash in instrument * Use lodash-es instead of lodash in utils * Use lodash-es instead of lodash in redux-devtools * Remove lodash from instrument * Remove lodash from redux-devtools * Remove lodash from utils * Remove unnecessary mapValues from extension
2025-10-31 07:57:39 +03:00 · 2024-08-13 23:42:16 -04:00 · 2024-08-13 23:42:16 -04:00 · 61ec00f505
commit 61ec00f505
parent 7f41fcf0fc
12 changed files with 64 additions and 80 deletions
--- a/extension/package.json
+++ b/extension/package.json
@ -35,7 +35,7 @@
    "@types/jsan": "^3.1.5",
    "jsan": "^3.1.14",
    "localforage": "^1.10.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.2.1",
@ -56,7 +56,7 @@
    "@testing-library/jest-dom": "^6.4.8",
    "@testing-library/react": "^16.0.0",
    "@types/chrome": "^0.0.269",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash-es": "^4.17.12",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@types/styled-components": "^5.1.34",
--- a/extension/src/pageScript/api/filters.ts
+++ b/extension/src/pageScript/api/filters.ts
@ -1,4 +1,3 @@
-import mapValues from 'lodash/mapValues';
 import { Action } from 'redux';
 import { LiftedState, PerformAction } from '@redux-devtools/instrument';
 import { LocalFilter } from '@redux-devtools/utils';
@ -46,10 +45,15 @@ function filterActions<A extends Action<string>>(
  actionSanitizer: ((action: A, id: number) => A) | undefined,
 ): { [p: number]: PerformAction<A> } {
  if (!actionSanitizer) return actionsById;
-  return mapValues(actionsById, (action, id) => ({
-    ...action,
-    action: actionSanitizer(action.action, id as unknown as number),
-  }));
+  return Object.fromEntries(
+    Object.entries(actionsById).map(([actionId, action]) => [
+      actionId,
+      {
+        ...action,
+        action: actionSanitizer(action.action, actionId as unknown as number),
+      },
+    ]),
+  );
 }

 function filterStates<S>(
--- a/extension/src/pageScript/api/index.ts
+++ b/extension/src/pageScript/api/index.ts
@ -1,5 +1,5 @@
 import jsan, { Options } from 'jsan';
-import throttle from 'lodash/throttle';
+import { throttle } from 'lodash-es';
 import { immutableSerialize } from '@redux-devtools/serialize';
 import { getActionsArray, getLocalFilter } from '@redux-devtools/utils';
 import { isFiltered, PartialLiftedState } from './filters';
--- a/extension/src/pageScript/index.ts
+++ b/extension/src/pageScript/index.ts
@ -4,15 +4,8 @@ import {
  getActionsArray,
  getLocalFilter,
 } from '@redux-devtools/utils';
-import throttle from 'lodash/throttle';
-import {
-  Action,
-  ActionCreator,
-  Dispatch,
-  Reducer,
-  StoreEnhancer,
-  StoreEnhancerStoreCreator,
-} from 'redux';
+import { throttle } from 'lodash-es';
+import { Action, ActionCreator, Dispatch, Reducer, StoreEnhancer } from 'redux';
 import Immutable from 'immutable';
 import {
  EnhancedStore,
--- a/packages/redux-devtools-instrument/package.json
+++ b/packages/redux-devtools-instrument/package.json
@ -40,10 +40,6 @@
    "prepack": "pnpm run clean && pnpm run build",
    "prepublish": "pnpm run type-check && pnpm run lint && pnpm run test"
  },
-  "dependencies": {
-    "@babel/runtime": "^7.25.0",
-    "lodash": "^4.17.21"
-  },
  "devDependencies": {
    "@babel/cli": "^7.24.8",
    "@babel/core": "^7.25.2",
@ -52,7 +48,6 @@
    "@babel/preset-env": "^7.25.3",
    "@babel/preset-typescript": "^7.24.7",
    "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.7",
    "@types/node": "^20.14.14",
    "jest": "^29.7.0",
    "redux": "^5.0.1",
--- a/packages/redux-devtools-instrument/src/instrument.ts
+++ b/packages/redux-devtools-instrument/src/instrument.ts
@ -1,8 +1,6 @@
-import difference from 'lodash/difference';
-import union from 'lodash/union';
-import isPlainObject from 'lodash/isPlainObject';
 import {
  Action,
+  isPlainObject,
  Observer,
  Reducer,
  Store,
@ -669,9 +667,18 @@ function liftReducerWith<
          const actionIds = [];
          for (let i = start; i < end; i++) actionIds.push(i);
          if (active) {
-            skippedActionIds = difference(skippedActionIds, actionIds);
+            const actionIdsSet = new Set(actionIds);
+            skippedActionIds = skippedActionIds.filter(
+              (actionId) => !actionIdsSet.has(actionId),
+            );
          } else {
-            skippedActionIds = union(skippedActionIds, actionIds);
+            const skippedActionIdsSet = new Set(skippedActionIds);
+            skippedActionIds = [
+              ...skippedActionIds,
+              ...actionIds.filter(
+                (actionId) => !skippedActionIdsSet.has(actionId),
+              ),
+            ];
          }

          // Optimization: we know history before this action hasn't changed
@ -696,7 +703,10 @@ function liftReducerWith<
        }
        case ActionTypes.SWEEP: {
          // Forget any actions that are currently being skipped.
-          stagedActionIds = difference(stagedActionIds, skippedActionIds);
+          const skippedActionIdsSet = new Set(skippedActionIds);
+          stagedActionIds = stagedActionIds.filter(
+            (actionId) => !skippedActionIdsSet.has(actionId),
+          );
          skippedActionIds = [];
          currentStateIndex = Math.min(
            currentStateIndex,
--- a/packages/redux-devtools-instrument/test/instrument.spec.ts
+++ b/packages/redux-devtools-instrument/test/instrument.spec.ts
@ -15,7 +15,6 @@ import {
  LiftedState,
 } from '../src/instrument';
 import { from, Observable } from 'rxjs';
-import _ from 'lodash';

 type CounterAction = { type: 'INCREMENT' } | { type: 'DECREMENT' };
 function counter(state = 0, action: CounterAction) {
@ -1171,13 +1170,15 @@ describe('instrument', () => {
  function filterStackAndTimestamps<S, A extends Action<string>>(
    state: LiftedState<S, A, null>,
  ) {
-    state.actionsById = _.mapValues(state.actionsById, (action) => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      delete action.timestamp;
-      delete action.stack;
-      return action;
-    });
+    state.actionsById = Object.fromEntries(
+      Object.entries(state.actionsById).map(([actionId, action]) => {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        delete action.timestamp;
+        delete action.stack;
+        return [actionId, action];
+      }),
+    );
    return state;
  }

--- a/packages/redux-devtools-utils/package.json
+++ b/packages/redux-devtools-utils/package.json
@ -39,7 +39,6 @@
    "get-params": "^0.1.2",
    "immutable": "^4.3.7",
    "jsan": "^3.1.14",
-    "lodash": "^4.17.21",
    "nanoid": "^5.0.7",
    "redux": "^5.0.1"
  },
@ -51,7 +50,6 @@
    "@babel/preset-env": "^7.25.3",
    "@babel/preset-typescript": "^7.24.7",
    "@types/jsan": "^3.1.5",
-    "@types/lodash": "^4.17.7",
    "@types/node": "^20.14.14",
    "rimraf": "^6.0.1",
    "typescript": "~5.5.4"
--- a/packages/redux-devtools-utils/src/filters.ts
+++ b/packages/redux-devtools-utils/src/filters.ts
@ -1,4 +1,3 @@
-import mapValues from 'lodash/mapValues';
 import { PerformAction } from '@redux-devtools/core';
 import { Action } from 'redux';

@ -23,10 +22,15 @@ function filterActions(
  actionSanitizer: ((action: Action<string>, id: number) => Action) | undefined,
 ) {
  if (!actionSanitizer) return actionsById;
-  return mapValues(actionsById, (action, id: number) => ({
-    ...action,
-    action: actionSanitizer(action.action, id),
-  }));
+  return Object.fromEntries(
+    Object.entries(actionsById).map(([actionId, action]) => [
+      actionId,
+      {
+        ...action,
+        action: actionSanitizer(action.action, actionId as unknown as number),
+      },
+    ]),
+  );
 }

 function filterStates(
--- a/packages/redux-devtools/package.json
+++ b/packages/redux-devtools/package.json
@ -42,8 +42,7 @@
  },
  "dependencies": {
    "@babel/runtime": "^7.25.0",
-    "@redux-devtools/instrument": "^2.2.0",
-    "lodash": "^4.17.21"
+    "@redux-devtools/instrument": "^2.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.24.8",
@ -54,7 +53,6 @@
    "@babel/preset-react": "^7.24.7",
    "@babel/preset-typescript": "^7.24.7",
    "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.7",
    "@types/node": "^20.14.14",
    "@types/react": "^18.3.3",
    "jest": "^29.7.0",
--- a/packages/redux-devtools/src/persistState.ts
+++ b/packages/redux-devtools/src/persistState.ts
@ -1,12 +1,10 @@
-import mapValues from 'lodash/mapValues';
-import identity from 'lodash/identity';
 import { Action, Reducer, StoreEnhancer } from 'redux';
 import { LiftedState } from '@redux-devtools/instrument';

 export default function persistState<S, A extends Action<string>, MonitorState>(
  sessionId?: string | null,
-  deserializeState: (state: S) => S = identity,
-  deserializeAction: (action: A) => A = identity,
+  deserializeState: (state: S) => S = (state) => state,
+  deserializeAction: (action: A) => A = (state) => state,
 ): StoreEnhancer {
  if (!sessionId) {
    return (next) =>
@ -19,10 +17,15 @@ export default function persistState<S, A extends Action<string>, MonitorState>(
  ): LiftedState<S, A, MonitorState> {
    return {
      ...state,
-      actionsById: mapValues(state.actionsById, (liftedAction) => ({
-        ...liftedAction,
-        action: deserializeAction(liftedAction.action),
-      })),
+      actionsById: Object.fromEntries(
+        Object.entries(state.actionsById).map(([actionId, liftedAction]) => [
+          actionId,
+          {
+            ...liftedAction,
+            action: deserializeAction(liftedAction.action),
+          },
+        ]),
+      ),
      committedState: deserializeState(state.committedState),
      computedStates: state.computedStates.map((computedState) => ({
        ...computedState,
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -92,7 +92,7 @@ importers:
      localforage:
        specifier: ^1.10.0
        version: 1.10.0
-      lodash:
+      lodash-es:
        specifier: ^4.17.21
        version: 4.17.21
      react:
@ -150,9 +150,9 @@ importers:
      '@types/chrome':
        specifier: ^0.0.269
        version: 0.0.269
-      '@types/lodash':
-        specifier: ^4.17.7
-        version: 4.17.7
+      '@types/lodash-es':
+        specifier: ^4.17.12
+        version: 4.17.12
      '@types/react':
        specifier: ^18.3.3
        version: 18.3.3
@ -617,9 +617,6 @@ importers:
      '@redux-devtools/instrument':
        specifier: ^2.2.0
        version: link:../redux-devtools-instrument
-      lodash:
-        specifier: ^4.17.21
-        version: 4.17.21
    devDependencies:
      '@babel/cli':
        specifier: ^7.24.8
@ -645,9 +642,6 @@ importers:
      '@types/jest':
        specifier: ^29.5.12
        version: 29.5.12
-      '@types/lodash':
-        specifier: ^4.17.7
-        version: 4.17.7
      '@types/node':
        specifier: ^20.14.14
        version: 20.14.14
@ -1819,13 +1813,6 @@ importers:
        version: 5.0.4(webpack-cli@5.1.4)(webpack@5.93.0)

  packages/redux-devtools-instrument:
-    dependencies:
-      '@babel/runtime':
-        specifier: ^7.25.0
-        version: 7.25.0
-      lodash:
-        specifier: ^4.17.21
-        version: 4.17.21
    devDependencies:
      '@babel/cli':
        specifier: ^7.24.8
@ -1848,9 +1835,6 @@ importers:
      '@types/jest':
        specifier: ^29.5.12
        version: 29.5.12
-      '@types/lodash':
-        specifier: ^4.17.7
-        version: 4.17.7
      '@types/node':
        specifier: ^20.14.14
        version: 20.14.14
@ -2633,9 +2617,6 @@ importers:
      jsan:
        specifier: ^3.1.14
        version: 3.1.14
-      lodash:
-        specifier: ^4.17.21
-        version: 4.17.21
      nanoid:
        specifier: ^5.0.7
        version: 5.0.7
@ -2664,9 +2645,6 @@ importers:
      '@types/jsan':
        specifier: ^3.1.5
        version: 3.1.5
-      '@types/lodash':
-        specifier: ^4.17.7
-        version: 4.17.7
      '@types/node':
        specifier: ^20.14.14
        version: 20.14.14