Recoil 전역 상태관리와 코드 스플리팅으로 웹 성능 극대화하기

manualChunks(id) {
  if (id.includes("node_modules")) {
    if (id.includes("@tanstack")) return "vendor-tanstack";
    if (id.includes("three")) return "vendor-three";
    if (id.includes("react")) return "vendor-react";
    if (id.includes("@socket")) return "vendor-socket";
    return "vendor";
  }

  if (id.includes("/features/")) {
    const feature = id.split("/features/")[1].split("/")[0];
    return `feature-${feature}`;
  }
}

test("리퀘스트 요청 횟수 테스트", async ({ page }) => {
  page.on("request", (request) => {
    if (request.url().includes(targetUserTokenUrl)) {
      return apiUserTokenRequests.push(request);
    }
    if (request.url().includes(targetUserInfoUrl)) {
      return apiUserInfoRequests.push(request);
    }
  });
  await expect(apiUserTokenRequests.length).toBe(1);
  await expect(apiUserInfoRequests.length).toBe(0);
});

(!) Some chunks are larger than 1000 kB after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: <https://rollupjs.org/configuration-options/#output-manualchunks>
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.

export type AuthState = {
  isAuthenticated: boolean;
  nickname?: string;
  isLoading: boolean;
  roomId?: string;
};

export const Route = createFileRoute("/create-vote")({
  component: () => (
    <ProtectedRoute>
      <CreateVotePage />;
    </ProtectedRoute>
  ),
  beforeLoad: async () => {
    redirectWaitingRoom(roomInfo, roomId);
    redirectVoting(roomInfo, roomId);
    redirectGuest(parsedInfo.role);
    redirectFinished(roomInfo, roomId);
  },
  errorComponent: ({ error }) => (
    <ErrorComponent error={error} feature="투표 생성 페이지" to="/login">
      <CreateVoteError />
    </ErrorComponent>
  ),
});

manualChunks(id) {
  if (id.includes("node_modules")) {
    if (id.includes("@tanstack")) return "vendor-tanstack";
    if (id.includes("@react-three/cannon"))
      return "vendor-react-three-cannon";
    if (id.includes("@react-three/drei"))
      return "vendor-react-three-drei";
    if (id.includes("@react-three/fiber"))
      return "vendor-react-three-fiber";
    if (id.includes("three")) return "vendor-three";
    if (id.includes("@socket")) return "vendor-socket";
    if (id.includes("react")) return "vendor-react";

    return "vendor";
  }
}