배포 시 청크 경고 메세지 발생

백엔드 서버에서 제공한 http-only된 리프레시 토큰 쿠키를 클라이언트에서 서버로 전송을 하기 위해서 https로 서로 맞추기로 하였다. 그래서 백엔드는 도메인을 구매하여 aws route53? AWS 로드밸런서를 사용해서 https 설정을 하였고 프론트에서는 예전에 한 번 사용해봤던 vercel이 배포 시 https 설정이 되길래 vercel을 통해 https를 설정할려고 하였다.

리팩토링을 하던 코드여서 하던 작업을 멈추고 배포에 중점을 잡아서 npm run build를 하던 와중 청크 크기가 넘었다는 경고 메세지가 발생하였습니다.

이는 기본 청크값이 500kb를 넘어서면 안되기 때문에 이런 경고 메세지가 출력했다고 합니다.

해결 방안

그래서 처음 생각한 해결 방안으로는

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src/"),
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return "vendor";
          }
        },
      },
      plugins: [visualizer()],
    },
  },
  server: {
    host: "127.0.0.1",
  },
});

Rollup 옵션의 rollupOptions.output.manualChunks 옵션을 설정하여 청크를 더 효율적으로 나눴다. 하지만 988kb -> 922kb 조금만 최적화가 되었습니다.

그래서 다른 해결 방안을 찾아봤는데 다른 개발자 분들은

chunkSizeWarningLimit: 1000

를 사용하여 청크 크기 경고 리미트를 늘려주는 방법을 많이들 채택하는거 같아 사용했다.

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src/"),
    },
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return "vendor";
          }
        },
      },
      plugins: [visualizer()],
    },
     chunkSizeWarningLimit: 1000,
  },
  server: {
    host: "127.0.0.1",
  },
});

그 후 문제 없이 해결

하지만 청크 크기 경고 한도를 이렇게 늘려도되는가?라는 의구심이 들었다.

그래서 확인 해 본 결과 경고 메세지를 줄여주는데 도움이 되지만

1. 경고 무시 가능성
   경고 임계값을 늘리면 실제로 큰 청크 파일이 만들어질 때 경고가 발생하지 않아서 개발자가 큰 청크 파일의 존재를 인지하지 못할 있고, 이는 성능 문제(초기 로딩 시간 증가, 캐시 비효율성 등)를 미리 감지하고 해결할 기회를 놓칠 수 있다는 단점이 발생할 수 있습니다.

2. 성능 문제 감지 불능
   청크 크기 경고는 성능 문제를 조기에 발견하는 데 유용하지만 경고 임계값을 늘리면 이러한 성능 문제를 놓칠 수 있으며, 이는 최종 사용자에게 부정적인 영향을 미칠 수 있습니다.

3. 코드 스플리팅 최적화의 어려움
   경고 임계값을 늘리면 코드 스플리팅과 관련된 최적화 작업을 소홀히 할 가능성이 있습니다. 이는 결과적으로 애플리케이션의 유지보수성과 성능에 부정적인 영향을 미칠 수 있습니다.

이러한 단점이 있다고 합니다.