[ Vue.js ] moment.js를 도입 할 때 번들 크기에주의하십시오 (IgnorePlugin 이해)

개인적으로 웹사이트 제작에 거의 필수 moment.js.
아래와 같이 어쩐지 도입합니다.

npm i --save moment

에서 사용하고 싶은 곳에서,

import moment from 'moment';

이제 moment.js를 사용할 수 있습니다. 그러나, 이대로는 번들 사이즈가 비대화하고 있습니다.
번들 크기 확인은 vue-cli에서 개발하는 프로젝트의 경우 다음 명령을 실행합니다.

vue-cli-service build --report

그러면 dist/report.html이 생성되므로 브라우저에서 열어 확인하십시오. --report가 webpack-bundle-analyzer을 실행하고 보고서를 출력합니다.



이 보고서는 webpack 번들의 요소 크기가 면적으로 표시됩니다. 알다시피, moment.js는 Vue.js 자체보다 큰 면적을 닫습니다. 위 그림은 prodcution build의 결과이지만 moment.js에서 540kB를 조입니다.

왜 이만큼 크기가 큰가 하면, locale라는 것이 포함되어 있기 때문입니다. 파일명으로부터 상상이 붙습니다만, 다언어 대응하기 위한 설정 파일이 되고 있습니다. 예를 들어 〇〇時〇〇分 라는 표시를 할 때 ja의 설정을 사용할 수 있습니다.

대책

그러나 간단한 시간을 형성하는 데 자주 사용되므로 locale이 필요하지 않습니다. 또, 캘린더등의 라이브러리를 사용하고 있는 경우는 로케일에 의존하고 있을 가능성이 높습니다만, 사용하고 싶은 것은 ja.js (일본어) 뿐이거나 합니다.
그럴 때 일부러 130개국의 언어 설정을 번들에 포함하는 것은 낭비됩니다. locale은 합계로 약 400kB이며, moment.js의 코어의 부분만이라면 약 150kB입니다.

그럴 때는 Webpack Ignore Plugin 을 사용합니다. 이 플러그인은 정규식으로 지정한 파일은 import나 require로 의존관계가 지정되어 있어도, 번들로부터 제외할 수가 있습니다.

Webpack 설정과 유사하지만 Vue.js의 경우 vue.config.js로 지정합니다.

vue.config.js

configureWebpack: {
    plugins: [
      new webpack.IgnorePlugin( {
        resourceRegExp: /^\.\/locale$/,
        contextRegExp: /moment$/
      } )
    ]
  },

미세한 이야기이지만 resourceRegExp는 무시하고 싶은 import와 require를 지정합니다. moment.js는 로케일을

require('./locale/' + name);

로 부르기 때문에, resourceRegExp: /^\.\/locale$/, 를 지정하고 있습니다.
또한 contextRegExp는 resourceRegExp를 적용할 폴더 이름을 지정합니다. 이번에는 moment 문자로 끝나는 모든 폴더를 대상으로합니다.

위에서 locale은 모두 제거할 수 있으며 프로젝트 내에서의 import는 유효하므로 필요한 locale만을 import할 수도 있습니다.

import from "moment/locale/ja";

이 상태에서 다시 보고서를 생성하면,



따라서 moment.js의 크기가 줄어 들었습니다.

요약

moment.js라든지, Rx.js라든지 아무것도 생각하지 않고 도입하면 번들을 매우 비대화시켜 버리는 것이 있기 때문에, 재차 주의 환기의 의미로 썼습니다.
여기까지 읽은 분은 다소 몸에 기억이 있다고 생각하므로, 참고해 주십시오.