القائمة
Replacing jQuery with native fetch API in WSH 2026. Covers async:false sync XHR replacement, fetchBinary, fetchJSON, sendFile, sendJSON, and ProvidePlugin removal.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Crok AI chat rendering optimization — SSE debouncing, ChatMessage memoization, Markdown re-render prevention
DM page and flow optimization — afterSave hook, message rendering, unread count queries for WSH 2026
Home page performance optimization — Post defaultScope, SSR data reduction, lazy media hydration for WSH 2026 CaX app
Lazy loading modal containers and route components to reduce initial bundle size — CrokContainer, NewPostModalContainer
SSE streaming optimization — batching char-by-char events and debouncing React re-renders for Crok AI chat performance
Runs Visual Regression Testing (VRT) locally to prevent disqualification in Web Speed Hackathon. Captures screenshots, compares against baselines, updates snapshots, and validates visual integrity after performance optimizations. Use when optimizing WSH apps, running VRT checks, updating VRT baselines, or investigating VRT failures.
| name | wsh-jquery-removal |
| description | Replacing jQuery with native fetch API in WSH 2026. Covers async:false sync XHR replacement, fetchBinary, fetchJSON, sendFile, sendJSON, and ProvidePlugin removal. |
jQuery's async: false option is the single biggest TBT contributor in the client. It performs synchronous XMLHttpRequests that block the main thread completely during every API call.
Use this skill when replacing jQuery with native fetch API.
// Before (uses jQuery with async: false)
import $ from "jquery";
export async function fetchBinary(url: string): Promise<ArrayBuffer> {
const result = await $.ajax({ async: false, dataType: "binary", responseType: "arraybuffer", url });
return result;
}
export async function fetchJSON<T>(url: string): Promise<T> {
const result = await $.ajax({ async: false, dataType: "json", method: "GET", url });
return result;
}
// After (native fetch, async)
export async function fetchBinary(url: string): Promise<ArrayBuffer> {
const response = await fetch(url);
return response.arrayBuffer();
}
export async function fetchJSON<T>(url: string): Promise<T> {
const response = await fetch(url);
return response.json() as Promise<T>;
}
export async function sendJSON<T>(url: string, body: unknown): Promise<T> {
const response = await fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(body),
});
return response.json() as Promise<T>;
}
export async function sendFile(url: string, file: ArrayBuffer, mime: string): Promise<void> {
await fetch(url, {
method: "PUT",
headers: { "Content-Type": mime },
body: file,
});
}
// webpack.config.js - Remove from entry
entry: {
main: [
// Remove: "core-js",
// Remove: "regenerator-runtime/runtime",
// Remove: "jquery-binarytransport",
"./src/index.css",
"./src/tsconfig.build.json",
"./src/index.tsx",
],
},
// Remove ProvidePlugin
plugins: [
// Remove: new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }),
],
cd application/client && pnpm remove jquery jquery-binarytransport
| Pitfall | Symptom | Fix |
|---|---|---|
| Components depending on sync behavior | Race conditions, data not ready | Ensure useFetch hooks handle async properly |
| sendJSON needs credentials | Session cookies not sent | Add credentials: "same-origin" to fetch options |
| Binary response handling | Data format mismatch | Use response.arrayBuffer() |
| ProvidePlugin still in config | Build error: $ is not defined | Remove ProvidePlugin entry |
| Change | Visual Impact | Mitigation |
|---|---|---|
| Async fetch | Data may load in different order | Usually not visible, same end state |
| Removed jQuery globals | None if all usages replaced | grep for $ and jQuery in codebase |
fetchers.ts at application/client/src/utils/fetchers.tsasync: false causes ~500ms-2000ms main thread blocks per request