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
+6
View File
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
import localForageLru from '@plebbit/plebbit-react-hooks/dist/lib/localforage-lru/index.js';
const gifFrameDb = localForageLru.createInstance({ name: '5chanGifFrames', size: 500 });
const failedUrls = new Set<string>();
const getCachedGifFrame = async (url: string): Promise<string | null> => {
return await gifFrameDb.getItem(url);
@@ -72,6 +73,10 @@ const useFetchGifFirstFrame = (url: string | undefined) => {
let isActive = true;
const fetchFrame = async () => {
if (failedUrls.has(url)) {
if (isActive) setFrameUrl(null);
return;
}
try {
const cachedFrame = await getCachedGifFrame(url);
if (cachedFrame) {
@@ -91,6 +96,7 @@ const useFetchGifFirstFrame = (url: string | undefined) => {
await setCachedGifFrame(url, objectUrl);
}
} catch (error) {
failedUrls.add(url);
console.error('Failed to load GIF frame:', error);
if (isActive) setFrameUrl(null);
}