[React JS] Vite 빌드 시 파라미터로 개발 소스 내 assets 캐시 버스팅 하는 방법

발단

인생을 살다보면 vite로 React 애플리케이션을 빌드할 때
아래와 같이 파일 경로에 hash 값을 넣는 방법이 아니라

`static/[name].[hash].js`

파라미터를 통해 캐시 버스팅을 하고 싶을 때가 있다. 아래처럼 말이다.

`static/[name].js?[hash]`;

문제는 이렇게 하면 해당 파일은 컴파일 되지 않는다.
아래와 같은 에러가 나면서 말이다.

ENOENT: no such file or directory, open ' ... some absolute path here ... \site\www\public\frontend\assets\someCss.css?v=82315f25'

나의 경우에는 .css 파일을 파라미터를 사용하여 불러오고 싶었다.

그 이유는 말하자면 길다.

물리적 탈모를 경험하기 전까지 머리를 쥐어짜던 중,

나는 이 사실을 알게 되었다.

vite에는 index.html 과 같은 진입점이 되는 HTML 파일을 변환하기 위한 훅이 있다.

 

구현방안

공식 문서를 보았다.

transformIndexHtml 이라는 vite에서 약속한 hook 이름이 있는데 이를 통해 index.html 을 내가 원하는대로 변경할 수 있다는 내용이다.

 

이것을 활용해보기로 마음 먹었다.

 

나는 react 애플리케이션의 시작점이 되는 파일에서 base.css 파일을 불러오려 했다. 
빌드를 돌려보니 빌드된 index.html에 아래와 같은 문장이 추가되어 있었다.

<link href="static/app/styles/base.css" type="text/css" rel="stylesheet" crossorigin />

이게 무슨 뜻인가?
vite가 빌드를 돌릴 때에 필요한 css 파일을 사전에 붙혀놓는다는 뜻이다.

그렇다면 나는 transformIndexHtml 훅 내에서 html을 읽은 후,

href=" 로 시작해서 .css" 로 끝나는, 즉 그대로 놔두면 캐시버스팅이 되지 않을 파일 경로 뒤에 빌드될 때의 고유값을 붙혀주면 된다.

 

좋다 그럼 그렇게 해보자.

 

코드는 아래와 같다. 플러그인에 커스텀 플러그인을 작성했다. name: "cache-busting" 이 부분을 참고하면 된다.

export default defineConfig((configEnv) => {
  const buildTime = new Date().getTime();

  return {
    plugins: [
      react(),
      tsconfigPaths(),
      dynamicImport(),
      {
        name: "cache-busting",
        //LINK -  참고 https://ko.vite.dev/guide/api-plugin#transformindexhtml
        // index.html과 같은 진입점이 되는 HTML 파일을 변환하기 위한 훅입니다
        transformIndexHtml(html) {
          // CSS 파일 참조에 타임스탬프 추가
          return html.replace(
            /(href)="(\.\/)?([^"]*\.(css))"/g,
            `$1="$2$3?v=${buildTime}"`
          );
        },
      },
    ],
    server: serverConfig,// 별도의 개발 서버 설정
    build: buildConfig(configEnv), // 별도의 빌드 설정
    base: "/",
  };
});

결과

before

빌드된 index.html

after

.css 파일들도 잘 컴파일 되었고

index.html에도 뒤에 파라미터가 잘 붙어있다.

 

아주 굳!!!

참고

• https://ko.vite.dev/guide/api-plugin#transformindexhtml
• https://stackoverflow.com/questions/76422980/vite-cache-busting-with-query-param-instead-of-file-name