perf(bundle): replace plebbit-js imports with local utility, split chunks, fix CLS and rerenders

Eliminate direct @plebbit/plebbit-js (8.7MB) imports from all UI components by replacing
Plebbit.getShortAddress() with a local get-short-address utility. Add Vite manual chunks for
plebbit-js, plebbit-react-hooks, and react-spring/use-gesture. Fix catalog CLS by matching
skeleton to wrapper dimensions. Lazy-load ChallengeModal and ReplyModal. Add failed-URL cache
to useFetchGifFirstFrame, optimize useHide selector, and memoize useFeed options in mod-queue.
This commit is contained in:
plebeius
2026-02-26 16:42:36 +08:00
parent cd71602730
commit 4bdee0362d
16 changed files with 92 additions and 59 deletions
+3 -3
View File
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
import { Link, useLocation, useNavigationType, useParams } from 'react-router-dom';
import { Virtuoso, VirtuosoHandle, StateSnapshot } from 'react-virtuoso';
import { Comment, useEditedComment, useReplies, useAccount, usePublishCommentModeration, useAccountComment } from '@plebbit/plebbit-react-hooks';
import Plebbit from '@plebbit/plebbit-js';
import getShortAddress from '../../lib/get-short-address';
import styles from '../../views/post/post.module.css';
import { shouldShowSnow } from '../../lib/snow';
import { getHasThumbnail } from '../../lib/utils/media-utils';
@@ -66,7 +66,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
? boardPath
: subplebbitAddress.endsWith('.eth') || subplebbitAddress.endsWith('.sol')
? subplebbitAddress
: Plebbit.getShortAddress({ address: subplebbitAddress })
: getShortAddress(subplebbitAddress)
: undefined;
const isReply = parentCid;
const title = post?.title?.trim();
@@ -203,7 +203,7 @@ const PostInfoAndMedia = ({ post, postReplyCount = 0, roles, threadNumber }: Pos
return Math.max(domCount, 1);
})();
const userID = address && Plebbit.getShortAddress({ address }); // shortened to 8 chars for display; users can verify the full user ID via "Copy user ID" in the post menu to guard against spoofing
const userID = address && getShortAddress(address); // shortened to 8 chars for display; users can verify the full user ID via "Copy user ID" in the post menu to guard against spoofing
const userIDBackgroundColor = hashStringToColor(userID);
const userIDTextColor = getTextColorForBackground(userIDBackgroundColor);