remove lodash to reduce bundle size by 100kb

2026-03-21 21:37:29 +00:00 · 2023-05-17 16:11:32 +02:00
parent 4a8939e5e5
commit eceaf3a98d
6 changed files with 12057 additions and 12047 deletions
--- a/commafeed-client/package-lock.json
+++ b/commafeed-client/package-lock.json
@@ -25,7 +25,6 @@
                "axios": "^1.4.0",
                "dayjs": "^1.11.7",
                "interweave": "^13.1.0",
-        "lodash": "^4.17.21",
                "mousetrap": "^1.6.5",
                "react": "^18.2.0",
                "react-async-hook": "^4.0.0",
@@ -38,6 +37,7 @@
                "react-router-dom": "^6.11.1",
                "react-swipeable": "^7.0.0",
                "swagger-ui-react": "^4.18.3",
+                "throttle-debounce": "^5.0.0",
                "tinycon": "^0.6.8",
                "use-local-storage": "^3.0.0",
                "websocket-heartbeat-js": "^1.1.2"
@@ -46,12 +46,12 @@
                "@lingui/cli": "^4.0.0",
                "@lingui/vite-plugin": "^4.0.0",
                "@types/eslint": "^8.37.0",
-        "@types/lodash": "^4.14.194",
                "@types/mousetrap": "^1.6.11",
                "@types/react": "^18.2.6",
                "@types/react-dom": "^18.2.4",
                "@types/react-infinite-scroller": "^1.2.3",
                "@types/swagger-ui-react": "^4.18.0",
+                "@types/throttle-debounce": "^5.0.0",
                "@types/tinycon": "^0.6.3",
                "@typescript-eslint/eslint-plugin": "^5.59.2",
                "@typescript-eslint/parser": "^5.59.2",
@@ -4252,12 +4252,6 @@
            "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
            "dev": true
        },
-    "node_modules/@types/lodash": {
-      "version": "4.14.194",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.194.tgz",
-      "integrity": "sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==",
-      "dev": true
-    },
        "node_modules/@types/mousetrap": {
            "version": "1.6.11",
            "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.11.tgz",
@@ -4335,6 +4329,12 @@
                "@types/react": "*"
            }
        },
+        "node_modules/@types/throttle-debounce": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+            "integrity": "sha512-Pb7k35iCGFcGPECoNE4DYp3Oyf2xcTd3FbFQxXUI9hEYKUl6YX+KLf7HrBmgVcD05nl50LIH6i+80js4iYmWbw==",
+            "dev": true
+        },
        "node_modules/@types/tinycon": {
            "version": "0.6.3",
            "resolved": "https://registry.npmjs.org/@types/tinycon/-/tinycon-0.6.3.tgz",
@@ -10962,6 +10962,14 @@
            "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
            "dev": true
        },
+        "node_modules/throttle-debounce": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+            "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
+            "engines": {
+                "node": ">=12.22"
+            }
+        },
        "node_modules/through": {
            "version": "2.3.8",
            "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
--- a/commafeed-client/package.json
+++ b/commafeed-client/package.json
@@ -33,7 +33,6 @@
        "axios": "^1.4.0",
        "dayjs": "^1.11.7",
        "interweave": "^13.1.0",
-    "lodash": "^4.17.21",
        "mousetrap": "^1.6.5",
        "react": "^18.2.0",
        "react-async-hook": "^4.0.0",
@@ -46,6 +45,7 @@
        "react-router-dom": "^6.11.1",
        "react-swipeable": "^7.0.0",
        "swagger-ui-react": "^4.18.3",
+        "throttle-debounce": "^5.0.0",
        "tinycon": "^0.6.8",
        "use-local-storage": "^3.0.0",
        "websocket-heartbeat-js": "^1.1.2"
@@ -54,12 +54,12 @@
        "@lingui/cli": "^4.0.0",
        "@lingui/vite-plugin": "^4.0.0",
        "@types/eslint": "^8.37.0",
-    "@types/lodash": "^4.14.194",
        "@types/mousetrap": "^1.6.11",
        "@types/react": "^18.2.6",
        "@types/react-dom": "^18.2.4",
        "@types/react-infinite-scroller": "^1.2.3",
        "@types/swagger-ui-react": "^4.18.0",
+        "@types/throttle-debounce": "^5.0.0",
        "@types/tinycon": "^0.6.3",
        "@typescript-eslint/eslint-plugin": "^5.59.2",
        "@typescript-eslint/parser": "^5.59.2",
--- a/commafeed-client/src/app/utils.ts
+++ b/commafeed-client/src/app/utils.ts
@@ -64,3 +64,5 @@ export const openLinkInBackgroundTab = (url: string) => {
        })
    )
 }
+
+export const truncate = (str: string, n: number) => (str.length > n ? `${str.slice(0, n - 1)}\u2026` : str)
--- a/commafeed-client/src/components/content/FeedEntries.tsx
+++ b/commafeed-client/src/components/content/FeedEntries.tsx
@@ -18,9 +18,9 @@ import { KeyboardShortcutsHelp } from "components/KeyboardShortcutsHelp"
 import { Loader } from "components/Loader"
 import { useMousetrap } from "hooks/useMousetrap"
 import { useViewMode } from "hooks/useViewMode"
-import throttle from "lodash/throttle"
 import { useEffect } from "react"
 import InfiniteScroll from "react-infinite-scroller"
+import { throttle } from "throttle-debounce"
 import { FeedEntry } from "./FeedEntry"

 export function FeedEntries() {
@@ -82,7 +82,7 @@ export function FeedEntries() {
                )
            }
        }
-        const throttledListener = throttle(listener, 100)
+        const throttledListener = throttle(100, listener)
        scrollArea?.addEventListener("scroll", throttledListener)
        return () => scrollArea?.removeEventListener("scroll", throttledListener)
    }, [dispatch, entries, viewMode, scrollMarks, scrollingToEntry])
--- a/commafeed-client/src/components/content/FeedEntryContextMenu.tsx
+++ b/commafeed-client/src/components/content/FeedEntryContextMenu.tsx
@@ -5,11 +5,11 @@ import { markEntriesUpToEntry, markEntry, starEntry } from "app/slices/entries"
 import { redirectToFeed } from "app/slices/redirect"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
-import { openLinkInBackgroundTab } from "app/utils"
-import { throttle, truncate } from "lodash"
+import { openLinkInBackgroundTab, truncate } from "app/utils"
 import { useEffect } from "react"
 import { Item, Menu, Separator, useContextMenu } from "react-contexify"
 import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb"
+import { throttle } from "throttle-debounce"

 interface FeedEntryContextMenuProps {
    entry: Entry
@@ -92,7 +92,7 @@ export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) {
                    >
                        <Group>
                            <TbRss size={iconSize} />
-                            <Trans>Go to {truncate(props.entry.feedName)}</Trans>
+                            <Trans>Go to {truncate(props.entry.feedName, 30)}</Trans>
                        </Group>
                    </Item>
                </>
@@ -118,7 +118,7 @@ export function useFeedEntryContextMenu(entry: Entry) {
        const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)

        const listener = () => contextMenu.hideAll()
-        const throttledListener = throttle(listener, 100)
+        const throttledListener = throttle(100, listener)

        scrollArea?.addEventListener("scroll", throttledListener)
        return () => scrollArea?.removeEventListener("scroll", throttledListener)
--- a/commafeed-client/src/components/content/FeedEntryFooter.tsx
+++ b/commafeed-client/src/components/content/FeedEntryFooter.tsx
@@ -7,9 +7,9 @@ import { useAppDispatch, useAppSelector } from "app/store"
 import { Entry } from "app/types"
 import { ActionButton } from "components/ActionButtton"
 import { ButtonToolbar } from "components/ButtonToolbar"
-import { throttle } from "lodash"
 import { useEffect, useState } from "react"
 import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbShare, TbStar, TbStarOff, TbTag } from "react-icons/tb"
+import { throttle } from "throttle-debounce"
 import { ShareButtons } from "./ShareButtons"

 interface FeedEntryFooterProps {
@@ -38,7 +38,7 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) {
        const scrollArea = document.getElementById(Constants.dom.mainScrollAreaId)

        const listener = () => setScrollPosition(scrollArea ? scrollArea.scrollTop : 0)
-        const throttledListener = throttle(listener, 100)
+        const throttledListener = throttle(100, listener)

        scrollArea?.addEventListener("scroll", throttledListener)
        return () => scrollArea?.removeEventListener("scroll", throttledListener)