1.문제의식

컴포넌트 이름이 너무 길어져서 스트레스를 받았다.

예를들어 그냥 아이템을 추가하기 위한 컴포넌트인데
뎁스가 깊어지면 컴포넌트명이 계속계속 길어진다..

2.고민과정

이걸 해결할 방법이 없나 살펴보다가 namespace와 유사한 방법이 떠올랐다

// src/component.js
export const Root = () => "root";
export const Title = () => "title";
export const Description = () => "description";

export const Component = {
  Root,
  Title,
  Description,
};

// src/index.js
import { Component } from "./component";

console.log(Component.Title());.

1)

이런식으로 임포트해서 Component.Title과 같이 접근하면
1. 적어도 features끼리는 컴포넌트명이 겹쳐도 된다.
2. 그리고 이렇게 export 할 수 있으면 임포트문도 한 feature당 하나로 줄일 수 있다
3. 또 컴포넌트가 길어질때와 마찬가지로 기능을 정의한 이름만 떠오르면 그 영역의 컴포넌트로 자동완성을 묶어서 볼 수 있다.
라는 생각이 들었다.

2)

그런데 주위에 물어보니까
트리셰이킹에 문제가 되지 않겠냐는 이야기를 들었다.

트리셰이킹이란 어떤 컴포넌트를 렌더링할때
코드중에 컴포넌트에 필요한 부분만 잘라서 보여주는 웹팩의 기능인데

여기서 생길 수 있는 문제는 Component라는 이름으로 임포트를 했을때
Title만 쓰더라도 Root, Description컴포넌트도 페이지에 불러와서 번들링될 수 있다는 것이다.

3)

확인해보려고 cra의 깃허브를 들어가 보았는데
현재버전은 5.0.1이었는데 5.0에 있었던 메이저 업데이트를 보았다.

여기에 웹팩5를 반영했다고 되어있어서
웹팩5의 릴리즈노트를 찾아보았다.

웹팩5에서는 중첩속성에 대해서도
안쓰는 속성은 트리셰이킹을 해준다고 한다

3.결론

// src/component.js
export const Root = () => "root";
export const Title = () => "title";
export const Description = () => "description";

export const Component = {
  Root,
  Title,
  Description,
};

// src/index.js
import { Component } from "./component";

console.log(Component.Title());.

// dist/main.js
(() => {
  "use strict";
  console.log("title");
})();

이런방식은 개발편의성이 향상될수는 있지만
esmodule방식이 아니라 commonjs방식으로 쓰이면 트리셰이킹이 안될 수 있다.

참고한 자료
1.웹팩5 릴리즈노트
https://webpack.js.org/blog/2020-10-10-webpack-5-release/#major-changes-optimization
2.웹팩에서의 트리셰이킹 테스트
https://blog.logrocket.com/tree-shaking-and-code-splitting-in-webpack/