[Feature] wowds-ui 디자인시스템 번들러 최적화, 디자인 시스템 배포

[eugene028]

🎉 변경 사항

1. 다자인 시스템 배포를 완료했습니당~
   wowds-ui
   wowds-icons
   wowds-tokens
2. 번들러가 index.js로 묶여 말려 들어가길래, 모듈 단위로 번들러를 만들 수 있도록 찢는 작업을 진행했어요!
   (작업 전)
   

(작업 후)

🙏 여기는 꼭 봐주세요!

commonjs가 트리쉐이킹이 잘 안된다고 해서 일단은 Rollup.config.cjs파일에 esm 버전 관련 트리쉐이킹 처리만 해둔 상태예요.
필요하다고 생각되면 cjs도 트리쉐이킹 세팅을 해둘게용.

[github-actions]

🚀 storybook: https://663657b8272769a8d18a5e3f-kiyqdvftug.chromatic.com/

[ghdtjgus76]

동적 import만 사용해도 코드 스플리팅이 되는 걸로 알고 있긴 한데, 혹시 loadable component를 사용한 이유가 있을까요?

[ghdtjgus76]

@eugene028
맨 처음에 트리쉐이킹이 안 됐던 이유를 알게 되어 공유 드립니다.
https://ko.vitejs.dev/guide/performance.html#avoid-barrel-files
저희도 모든 컴포넌트를 index.ts라는 하나의 배럴 파일에서 export하는 방식으로 코드를 작성해놨는데, 이렇게 하니 index.js라는 파일 하나로 번들링이 되고 index.js 파일 내부 모든 컴포넌트를 다 불러왔습니다.

위에서 preserveModules라는 옵션을 활성화해주셔서 이 문제가 해결되기는 했는데, 방법이 두 가지인 것 같습니다.

1. entry file을 index.js라는 하나의 파일을 사용하는 것이 아니라 여러 진입점을 설정해주면 될 것으로 예상됩니다.
2. 유진님이 해주신 것처럼 기존 설정 + preserveModules 설정 활성화하는 방법도 있습니다.

그래서 롤업 공식 문서를 참고해서 어떤 방법이 더 좋은지 고민을 해봤습니다.
일단, 첫 번째 방식입니다.
https://rollupjs.org/configuration-options/#input

여러 진입점을 배열로 전달할 수 있고, 그렇게 하면 각각 다른 청크들로 분리됩니다.

두 번째 방식입니다.

preserveModules 방식도 여러 청크들로 파일을 분리할 수 있습니다.
하지만, 저번에 cjs 방식에도 같은 옵션을 지정해주었을 때 되지 않았던 부분이 걱정되는 지점입니다.

그래서 결론은, 첫 번째 방식을 사용해서 cjs 모듈에도 적용해보는 게 어떤지 건의드립니다!
그리고 이 부분 말고도 롤업 세팅 관련해서 개선했으면 하는 부분이 몇 가지 생겨 제가 새로 PR 생성해서 진행해도 괜찮으실까요?