From 8a6ae843acb15378d05a4fbe1ec93a7dee7e5219 Mon Sep 17 00:00:00 2001 From: Shusui MOYATANI Date: Fri, 12 Jan 2024 12:30:31 +0900 Subject: [PATCH] minify bundle size --- .eslintrc.js | 22 ++++++++++++++++++++++ src/components/Actions.tsx | 6 ++++-- src/components/SideBar.tsx | 5 +++-- src/components/column/FollwingColumn.tsx | 2 +- src/components/column/LoadMore.tsx | 2 +- src/components/modal/GlobalModal.tsx | 11 ++++++----- src/core/useConfig.ts | 2 +- src/nostr/query.ts | 2 +- src/nostr/useLnurlEndpoint.ts | 2 +- 9 files changed, 40 insertions(+), 14 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 5e0d9e7..e17c05e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -42,6 +42,28 @@ module.exports = { tsx: 'never', }, ], + /* + 'import/no-extraneous-dependencies': [ + 'error', + { devDependencies: false, optionalDependencies: false, peerDependencies: false }, + ], + */ + 'no-restricted-imports': [ + 'error', + { + paths: [ + // enforce importing function individually + { + name: 'lodash', + message: 'please use lodash/... instead', + }, + { + name: 'nostr-tools', + message: 'please use nostr-tools/... instead', + }, + ], + }, + ], 'import/order': [ 'warn', { diff --git a/src/components/Actions.tsx b/src/components/Actions.tsx index 5762749..f696e99 100644 --- a/src/components/Actions.tsx +++ b/src/components/Actions.tsx @@ -1,6 +1,7 @@ import { type JSX, type Component, + lazy, Switch, Match, Show, @@ -20,8 +21,6 @@ import { noteEncode } from 'nostr-tools/nip19'; import { type Event as NostrEvent } from 'nostr-tools/pure'; import EmojiDisplay from '@/components/EmojiDisplay'; -import EventDebugModal from '@/components/modal/EventDebugModal'; -import UserList from '@/components/modal/UserList'; import useEmojiPicker, { EmojiData } from '@/components/useEmojiPicker'; import useContextMenu from '@/components/utils/useContextMenu'; import useConfig from '@/core/useConfig'; @@ -38,6 +37,9 @@ import ensureNonNull from '@/utils/ensureNonNull'; import { formatSiPrefix } from '@/utils/siPrefix'; import timeout from '@/utils/timeout'; +const EventDebugModal = lazy(() => import('@/components/modal/EventDebugModal')); +const UserList = lazy(() => import('@/components/modal/UserList')); + export type ActionProps = { event: NostrEvent; onClickReply: () => void; diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 5495a8b..2b0a338 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -1,4 +1,4 @@ -import { createSignal, Show, onMount, onCleanup, type JSX, Component } from 'solid-js'; +import { createSignal, Show, onMount, onCleanup, lazy, type JSX, Component } from 'solid-js'; import Cog6Tooth from 'heroicons/24/outline/cog-6-tooth.svg'; import Plus from 'heroicons/24/outline/plus.svg'; @@ -6,7 +6,6 @@ import MagnifyingGlass from 'heroicons/24/solid/magnifying-glass.svg'; import PencilSquare from 'heroicons/24/solid/pencil-square.svg'; import throttle from 'lodash/throttle'; -import Config from '@/components/modal/Config'; import NotePostForm from '@/components/NotePostForm'; import usePopup, { type UsePopup } from '@/components/utils/usePopup'; import { createSearchColumn } from '@/core/column'; @@ -16,6 +15,8 @@ import useModalState from '@/hooks/useModalState'; import isMobile from '@/utils/isMobile'; import resolveAsset from '@/utils/resolveAsset'; +const Config = lazy(() => import('@/components/modal/Config')); + const useMediaWidth = () => { const [innerWidth, setInnerWidth] = createSignal(window.innerWidth); diff --git a/src/components/column/FollwingColumn.tsx b/src/components/column/FollwingColumn.tsx index d26695a..087f296 100644 --- a/src/components/column/FollwingColumn.tsx +++ b/src/components/column/FollwingColumn.tsx @@ -1,7 +1,7 @@ import { Component, createEffect, onCleanup, onMount } from 'solid-js'; import Home from 'heroicons/24/outline/home.svg'; -import { uniq } from 'lodash'; +import uniq from 'lodash/uniq'; import BasicColumnHeader from '@/components/column/BasicColumnHeader'; import Column from '@/components/column/Column'; diff --git a/src/components/column/LoadMore.tsx b/src/components/column/LoadMore.tsx index 27d8a7b..7453abc 100644 --- a/src/components/column/LoadMore.tsx +++ b/src/components/column/LoadMore.tsx @@ -8,7 +8,7 @@ import { type Component, } from 'solid-js'; -import { type Event as NostrEvent } from 'nostr-tools'; +import { type Event as NostrEvent } from 'nostr-tools/pure'; import ColumnItem from '@/components/ColumnItem'; import useScroll from '@/hooks/useScroll'; diff --git a/src/components/modal/GlobalModal.tsx b/src/components/modal/GlobalModal.tsx index 49afb9c..e6224d7 100644 --- a/src/components/modal/GlobalModal.tsx +++ b/src/components/modal/GlobalModal.tsx @@ -1,13 +1,14 @@ -import { Show, Switch, Match, Component } from 'solid-js'; +import { lazy, Show, Switch, Match, Component } from 'solid-js'; -import About from '@/components/modal/About'; -import AddColumn from '@/components/modal/AddColumn'; -import ProfileDisplay from '@/components/modal/ProfileDisplay'; -import ProfileEdit from '@/components/modal/ProfileEdit'; import useModalState from '@/hooks/useModalState'; import usePubkey from '@/nostr/usePubkey'; import ensureNonNull from '@/utils/ensureNonNull'; +const About = lazy(() => import('@/components/modal/About')); +const AddColumn = lazy(() => import('@/components/modal/AddColumn')); +const ProfileDisplay = lazy(() => import('@/components/modal/ProfileDisplay')); +const ProfileEdit = lazy(() => import('@/components/modal/ProfileEdit')); + const GlobalModal: Component = () => { const pubkey = usePubkey(); const { modalState, showProfile, closeModal } = useModalState(); diff --git a/src/core/useConfig.ts b/src/core/useConfig.ts index 5b3397d..0898548 100644 --- a/src/core/useConfig.ts +++ b/src/core/useConfig.ts @@ -1,6 +1,6 @@ import { createRoot, type Accessor, type Setter } from 'solid-js'; -import { sortBy } from 'lodash'; +import sortBy from 'lodash/sortBy'; import uniq from 'lodash/uniq'; import * as Kind from 'nostr-tools/kinds'; import { type Event as NostrEvent } from 'nostr-tools/pure'; diff --git a/src/nostr/query.ts b/src/nostr/query.ts index c4a04e7..46e2768 100644 --- a/src/nostr/query.ts +++ b/src/nostr/query.ts @@ -1,5 +1,5 @@ import { QueryClient, QueryKey } from '@tanstack/solid-query'; -import { uniqBy } from 'lodash'; +import uniqBy from 'lodash/uniqBy'; import { Event as NostrEvent } from 'nostr-tools/pure'; import { compareEvents, pickLatestEvent, sortEvents } from '@/nostr/event/comparator'; diff --git a/src/nostr/useLnurlEndpoint.ts b/src/nostr/useLnurlEndpoint.ts index 14d5318..52adf87 100644 --- a/src/nostr/useLnurlEndpoint.ts +++ b/src/nostr/useLnurlEndpoint.ts @@ -1,7 +1,7 @@ import { createMemo } from 'solid-js'; import { createQuery } from '@tanstack/solid-query'; -import { type Event as NostrEvent } from 'nostr-tools'; +import { type Event as NostrEvent } from 'nostr-tools/pure'; import isValidId from '@/nostr/event/isValidId'; import { fetchLnurlEndpoint, verifyZapReceipt, type LnurlEndpoint } from '@/nostr/zap';