Remix性能优化 #

访问 /dashboard
├── 加载 root.tsx 代码
├── 加载 dashboard.tsx 代码
└── 不加载其他路由代码

import { lazy, Suspense } from "react";

const HeavyChart = lazy(() => import("~/components/HeavyChart"));

export default function Dashboard() {
  return (
    <div>
      <Suspense fallback={<div>加载图表中...</div>}>
        <HeavyChart data={chartData} />
      </Suspense>
    </div>
  );
}

import { lazy, Suspense } from "react";
import { RouteObject } from "react-router-dom";

const AdminPanel = lazy(() => import("./routes/admin"));

const routes: RouteObject[] = [
  {
    path: "admin",
    element: (
      <Suspense fallback={<div>加载中...</div>}>
        <AdminPanel />
      </Suspense>
    ),
  },
];

export async function loader({ params }: LoaderFunctionArgs) {
  const [user, posts, comments] = await Promise.all([
    getUser(params.id),
    getPosts(params.id),
    getComments(params.id),
  ]);
  
  return json({ user, posts, comments });
}

import { defer } from "@remix-run/node";
import { Await, useLoaderData } from "@remix-run/react";
import { Suspense } from "react";

export async function loader({ params }: LoaderFunctionArgs) {
  const post = await getPost(params.id);
  const comments = getComments(params.id);
  
  return defer({ post, comments });
}

export default function Post() {
  const { post, comments } = useLoaderData<typeof loader>();
  
  return (
    <div>
      <article>{post.content}</article>
      
      <Suspense fallback={<div>加载评论中...</div>}>
        <Await resolve={comments}>
          {(comments) => <CommentList comments={comments} />}
        </Await>
      </Suspense>
    </div>
  );
}

import { Link } from "@remix-run/react";

export default function PostList({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          <Link 
            to={`/posts/${post.id}`}
            prefetch="intent"
          >
            {post.title}
          </Link>
        </li>
      ))}
    </ul>
  );
}

export async function loader() {
  const data = await fetchData();
  
  return json(data, {
    headers: {
      "Cache-Control": "public, max-age=300, stale-while-revalidate=60",
    },
  });
}

const cache = new Map<string, { data: any; expires: number }>();

export async function loader({ params }: LoaderFunctionArgs) {
  const cacheKey = `post-${params.id}`;
  const cached = cache.get(cacheKey);
  
  if (cached && cached.expires > Date.now()) {
    return json(cached.data);
  }
  
  const post = await getPost(params.id);
  cache.set(cacheKey, {
    data: post,
    expires: Date.now() + 60 * 1000,
  });
  
  return json({ post });
}

import type { LinksFunction } from "@remix-run/node";

export const links: LinksFunction = () => [
  {
    rel: "preload",
    href: "/images/hero.webp",
    as: "image",
  },
];

export default function Hero() {
  return (
    <picture>
      <source srcSet="/images/hero.webp" type="image/webp" />
      <img 
        src="/images/hero.jpg" 
        alt="Hero"
        loading="lazy"
        width={800}
        height={400}
      />
    </picture>
  );
}

export const links: LinksFunction = () => [
  {
    rel: "preload",
    href: "/fonts/inter-var.woff2",
    as: "font",
    type: "font/woff2",
    crossOrigin: "anonymous",
  },
];

import { useEffect } from "react";

export function useWebVitals() {
  useEffect(() => {
    if (typeof window !== "undefined" && "performance" in window) {
      const observer = new PerformanceObserver((list) => {
        for (const entry of list.getEntries()) {
          console.log(entry.name, entry.startTime);
        }
      });
      
      observer.observe({ entryTypes: ["paint", "largest-contentful-paint"] });
      
      return () => observer.disconnect();
    }
  }, []);
}

export function trackPerformance() {
  if (typeof window === "undefined") return;
  
  const navigation = performance.getEntriesByType("navigation")[0] as PerformanceNavigationTiming;
  
  const metrics = {
    dns: navigation.domainLookupEnd - navigation.domainLookupStart,
    tcp: navigation.connectEnd - navigation.connectStart,
    request: navigation.responseStart - navigation.requestStart,
    response: navigation.responseEnd - navigation.responseStart,
    domProcessing: navigation.domComplete - navigation.domInteractive,
    total: navigation.loadEventEnd - navigation.fetchStart,
  };
  
  // 发送到分析服务
  sendMetrics(metrics);
}