perf(audit): emojibase lazy-split, SW precache, Prism subset, lazy images
- emojibase (~965 KB) is now fully lazy: plugins/emoji.ts loads compact data + shortcode maps via a memoized dynamic import (rejections reset the memo so a mid-deploy chunk 404 can retry); reaction labels degrade to the raw glyph until loaded. Consumers get FRESH array references on load (the module arrays populate in place — same-ref state updates would skip re-render and leave emoji search empty; reviewer-caught). Verified out of the eager graph. - Service worker precaches hashed assets (workbox precacheAndRoute, 82 entries ~10.8 MB incl. the crypto wasm): repeat visits stop re-downloading the app. index.html is NOT precached — navigations stay network-first so deploys are picked up immediately; the media-auth fetch handler is untouched. - ReactPrism: curated 21-language set — chunk 574 KB → 71 KB. - Timeline inline images get loading="lazy". - Removed dead dompurify (+types); sanitize-html is the real sanitizer. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import React, { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo } from 'react';
|
||||
import React, { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo, useState } from 'react';
|
||||
import { Editor } from 'slate';
|
||||
import { Box, MenuItem, Text, toRem } from 'folds';
|
||||
import { Room } from 'matrix-js-sdk';
|
||||
@@ -11,7 +11,7 @@ import { onTabPress } from '../../../utils/keyboard';
|
||||
import { createEmoticonElement, moveCursor, replaceWithElement } from '../utils';
|
||||
import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
|
||||
import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
|
||||
import { IEmoji, emojis } from '../../../plugins/emoji';
|
||||
import { IEmoji, emojis, loadEmojiData } from '../../../plugins/emoji';
|
||||
import { useKeyDown } from '../../../hooks/useKeyDown';
|
||||
import { mxcUrlToHttp } from '../../../utils/matrix';
|
||||
import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
|
||||
@@ -47,13 +47,32 @@ export function EmoticonAutocomplete({
|
||||
const imagePacks = useRelevantImagePacks(ImageUsage.Emoticon, imagePackRooms);
|
||||
const recentEmoji = useRecentEmoji(mx, 20);
|
||||
|
||||
// Lazily load emojibase data (see plugins/emoji `loadEmojiData`). Until it
|
||||
// resolves, `emojis` is empty and autocomplete matches only custom-emoji
|
||||
// packs; the unicode emoji list fills in once loaded.
|
||||
const [loadedEmojis, setLoadedEmojis] = useState<IEmoji[]>(() => emojis);
|
||||
useEffect(() => {
|
||||
let alive = true;
|
||||
loadEmojiData()
|
||||
// Fresh array reference: loadEmojiData populates the module-level array
|
||||
// IN PLACE, so state set to the same ref would bail out of re-rendering
|
||||
// and the search list would never gain the unicode emojis.
|
||||
.then((loaded) => {
|
||||
if (alive) setLoadedEmojis(loaded.emojis.slice());
|
||||
})
|
||||
.catch(() => undefined);
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, []);
|
||||
|
||||
const searchList = useMemo(() => {
|
||||
const list: Array<EmoticonSearchItem> = [];
|
||||
return list.concat(
|
||||
imagePacks.flatMap((pack) => pack.getImages(ImageUsage.Emoticon)),
|
||||
emojis,
|
||||
loadedEmojis,
|
||||
);
|
||||
}, [imagePacks]);
|
||||
}, [imagePacks, loadedEmojis]);
|
||||
|
||||
const [result, search, resetSearch] = useAsyncSearch(
|
||||
searchList,
|
||||
|
||||
Reference in New Issue
Block a user