webpack5로 빌드환경을 구축해서 번들파일을 만들었는데 다른 방식으로 빌드했을때보다 용량이 100kb 늘어나 있었다. --;
용량 줄이는 부분에서 계속 삽질을 하고 있었는데 계속 해결이 되질 않는다.

계속 시도를 해보다가 webpack이 이렇게 허술할리 없을거라는 생각에 생각을 전환시켜 보았다. 그럼 용량을 줄이는 부분의 문제보다는 자바스크립트 트랜스파일링 하는 과정에서 코드가 많았던거라는 생각이 들었다.
애초부터 용량이 많았던게 아닐까.. 라는 생각이 드니 바벨의 문제라는 생각에 미치니 바벨쪽으로 알아보았다.
그래서 구글링을 하다가 다음 글을 찾았다.

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=shadowbug&logNo=221367832112

여기 글에서 트랜스파일링에는 폴리필과 트랜스폼 런타임 두가지 방식이 있다는 것이다.
그럼 웹팩의 기본 모드는 폴리필에 우선시한다는 생각에 미쳐 트랜스폼 런타임을 플러그인으로 넣어보자는 생각에 미쳤다.

babel.config.js

다음과 같이 @babel/plugin-transform-runtime을 설치하고 집어넣고 빌드를 해보았다.

module.exports = function(api) {
  const presets = [
    '@babel/preset-env',
  ];
  const plugins = [
    '@babel/plugin-transform-runtime',
  ];
  return { presets, plugins };
};

결국 90kb 정도 줄이는데 성공했다! 나머지는 umd포맷의 방식과 웹팩의 특성으로 코드가 더 들어가 있을거라는 예상이 들어서 옵션을 좀더 만져보면 용량을 더 줄일 수 있을거라고 생각된다.
중요한것은 소스코드의 최적화와 모듈의 집중이라 생각한다.

작은 컴포넌트에서 100kb 이상이 나오는건 아무래도 덩치가 크다고 생각한다.