april breeze

another web programmer

photo gallery

react-dates ES Module build for webpack Tree Shaking

import { DateRangePicker } from 'react-dates';

일반적인 import 방식. webpack bundle에 react-dates 전부 다 포함됨.

import DateRangePicker from 'react-dates/lib/components/DateRangePicker';

이렇게 하면 실제 사용할 컴포넌트만 불러오므로 용량이 줄어듦. 약간.

import DateRangePicker from 'react-dates/esm/components/DateRangePicker';

그런데, 이렇게 /lib/를 /esm/으로 바꾸면 용량이 약간 더 줄어듦.

/lib/는 CommonJS build이고, /esm/은 ES Module build라서 webpack의 tree-shaking이 적용됨. 물론 UglifyJSPlugin을 사용해야함.

https://github.com/airbnb/react-dates/pull/791

https://webpack.js.org/guides/tree-shaking/

comments powered by Disqus