webpack으로 moment.js의 불필요한 로케일 파일 로딩을 막는 방법

로케일(locale) 파일은 테마 템플릿에서 사용되는 텍스트 문자열들의 번역 집합을 담고 있는 .json 파일입니다. 각 언어마다 별도의 로케일 파일이 존재합니다.

그런데 코드에서 moment.js를 require로 불러와 webpack으로 번들링하면, 기본적으로 모든 언어의 로케일 파일이 함께 포함되기 때문에 번들 크기가 지나치게 커지는 문제가 발생합니다.

해결 방법: IgnorePlugin 활용

webpack의 IgnorePlugin을 사용하면 moment.js의 모든 로케일 파일을 제외할 수 있습니다.

예제

const webpack = require('webpack');
module.exports = {
    plugins: [
        // moment.js의 모든 로케일 파일 무시
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    ],
};
// 필요한 로케일만 코드에서 직접 로드
const moment = require('moment');
require('moment/locale/ja');
moment.locale('ja');

위 설정대로 번들링하면 webpack은 일본어(ja) 로케일 파일만 포함하게 됩니다. 이를 통해 번들 크기를 크게 줄일 수 있습니다.

정리

핵심은 다음과 같습니다.

• IgnorePlugin으로 moment.js의 전체 로케일 디렉터리를 제외합니다.
• 실제로 필요한 언어의 로케일만 require로 개별적으로 로드합니다.
• moment.locale()을 호출해 해당 언어를 기본값으로 설정합니다.

이 방식은 프로젝트에서 실제로 사용하는 언어가 한두 개뿐일 때 특히 효과적이며, 불필요한 리소스 낭비 없이 최적화된 번들을 만들 수 있습니다.