perf: analytics stratejisi, radix tree-shaking, DevPanel, motion/mini (Faz 2)
- Rybbit Script beforeInteractive -> afterInteractive: analitik artık hydration'dan önce kritik yolda çalışmıyor (yalnızca preload hint'i kalıyor) - next.config: experimental.optimizePackageImports ["radix-ui"] — 36 alt paketli kök barrel modül grafiğini şişiriyordu (VPS build OOM geçmişi) - DevPanel: dev-panel-mount.tsx ile prod'da import() erişilemez dalda; dev kodu + dev action proxy'leri prod chunk'lardan çıktı (rota başına ~21 KB) - motion/mini: use-pixel-heat + sihirbaz-cagri-karti yalnızca duration/ease kullanıyor; WAAPI tabanlı mini animate tam motoru bundle'dan çıkarır Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
18
src/components/dev/dev-panel-mount.tsx
Normal file
18
src/components/dev/dev-panel-mount.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
// NODE_ENV build sırasında statik yerine konur: prod build'de import()
|
||||
// erişilemez dalda kalır ve dev-panel (+ dev server-action proxy'leri)
|
||||
// modül grafiğine hiç girmez — layout'taki statik import ~92 KB'lık
|
||||
// paylaşılan chunk'a dev kodu taşıyordu. Dev'de panel dynamic yüklenir.
|
||||
const DevPanelIc =
|
||||
process.env.NODE_ENV !== "production"
|
||||
? dynamic(() => import("./dev-panel").then((m) => m.DevPanel), {
|
||||
ssr: false,
|
||||
})
|
||||
: null;
|
||||
|
||||
export function DevPanelMount() {
|
||||
return DevPanelIc ? <DevPanelIc /> : null;
|
||||
}
|
||||
@@ -16,7 +16,11 @@
|
||||
*/
|
||||
|
||||
import { useEffect, type RefObject } from "react";
|
||||
import { animate, type AnimationPlaybackControls } from "motion";
|
||||
// WAAPI tabanlı mini animate yeterli (yalnızca duration/ease kullanılıyor);
|
||||
// tam motor client bundle'ına girmez. Tip mini'den export edilmiyor —
|
||||
// type-only import build'de silinir, maliyeti yok.
|
||||
import { animate } from "motion/mini";
|
||||
import type { AnimationPlaybackControls } from "motion";
|
||||
|
||||
const FINE_POINTER_QUERY = "(hover: hover) and (pointer: fine)";
|
||||
const HOT_COLOR = "#f97316"; // orange-500
|
||||
|
||||
Reference in New Issue
Block a user