리액트 JS 배포시 캐싱 무효

cra ( create-react-app )을 통해 만들어진 리액트웹 프론트를 빌드해서 배포 할 때 기존에 이미 존재 했던  js 파일들이 캐싱 되어 유저자리에서 업데이트가 되지 않는 이슈.

 

cra를 통해 배포하면 main.xx.js 라는 통합 js 로 배포 되고, 해당 파일은 새로 빌드할때마다 이름이 바뀌어서 캐싱이 무효화 되지만 index.js landingpage.js 등등 사용자가 만든 기본 js파일들은 이름을 그대로 사용해서 내용이 변경되더라도 빌드시 이름이 변경되지 않고, 빌드를 새로 배포 하더라도 유저 자리에서 업데이트 된 내용을 확인 하려면 브라우저의 캐시무효화를 체크 해 줘야 하는 번거로움이 있었다.

 

기존에 craco를 쓰고 있었으니, 아래에 plugin: "craco-cache-busting", 세트를 추가 해 준다.

 

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

// const cracoCacheBusting = require('craco-cache-busting');

const fs = require('fs');

module.exports = {

  plugins: [

    {

      plugin: {

        overrideWebpackConfig: ({ webpackConfig }) => {

          webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));

          return webpackConfig;

        },

      },

    },

    {

      plugin: "craco-cache-busting",

      // cancel js cache

      filenames: ["**/*.js"],      

      cacheBustingKey: (filename) => {

        return fs.readFileSync(filename).toString().sha1();

      },

    },

  ],

};