React Chunk hash를 제거 해보자

SPA React 프로젝트를 build 하면 static 폴더에 chunks js, css file 이 생성된다. 

매번 build 시 chunk file의 middle name으로 hash 값이 들어가는데, 해당 hash 값 때문에 SPA 프로젝트 업데이트 시 

Loading chunk failed 에러가 자주 발생한다. 

chunk failed 는 main.js 파일이 브라우저에 캐싱되어 static 또는 dynamic 서버에 요청한 js 파일이 없어 index.html을 chunk.js를 대신 사용하여 발생하는 에러이다.

간단한 static web 프로젝트라면 chunk의 hash값을 제거하는것 만으로도 일단 에러는 피할 수 있다.

물론 hash 를 제거한다면 다른 문제가 발생할 수 있다. 해당 문제는 ErrorBoundary로 해결해야..

hash를 제거하는 것은 추천하지 않는 방법이긴 하다.

chunk file에 hash 값을 제거하기 위해서는 webpack 설정을 변경해야한다

 대부분 CRA를 통해 프로젝트를 생성하기 때문에 webpack 설정을 변경하기는 쉽지가 않다. 그렇기 때문에

react-app-rewired를 사용해보자

https://www.npmjs.com/package/react-app-rewired

yarn add react-app-rewired --dev

이후 package.json의 build script 명령어를 변경해 주면 거의 완료되었다.

"build": "react-app-rewired build",

프로젝트 최상위 위치에 config-overrides.js 파일을 추가한다.

아래 config-overrides.js 는 package.json 에서 version을 가져와 hash 값을 version 명으로 변경하는 설정이다.

module.exports = function override(config, env) {
    if (env !== "production") {
        return config;
    }

    const pjson = require("./package.json");
    const { version } = pjson;
    config.output.filename = `static/js/[name].${version}.js`;
    config.output.chunkFilename = `static/js/[name].${version}.chunk.js`;

    // Get rid of hash for css files
    const miniCssExtractPlugin = config.plugins.find(
        element => element.constructor.name === "MiniCssExtractPlugin",
    );
    miniCssExtractPlugin.options.filename = `static/css/[name].${version}.css`;
    miniCssExtractPlugin.options.chunkFilename = `static/css/[name].${version}.css`;

    // Get rid of hash for media files
    if (config.module.rules.length > 1 && config.module.rules[1] && config.module.rules[1].oneOf) {
        config.module.rules[1].oneOf.forEach(oneOf => {
            if (!oneOf.options || oneOf.options.name !== "static/media/[name].[hash:8].[ext]") {
                return;
            }
            oneOf.options.name = `static/media/[name].${version}.[ext]`;
        });
    }
    return config;
};

 

설정 후 yarn build

606 B build/static/js/43.1.00.01.chunk.js
375 B build/static/css/1.1.00.01.css

hash  값이 version 명으로 변경된 걸 확인할 수 있다.