디자인 시스템 번들러 논의

[klmhyeonwoo]

여러분들 디자인 시스템 구성할 번들러에 대해서 자유롭게 이야기를 나눠봅시다

[klmhyeonwoo]

@leeminhee119, @raymondanything

[leeminhee119]

우선 번들링에 대한 부족한 지식으로 드리는 의견임을 말씀드립니다 🤓

결론은 Rollup을 사용하는게 어떨까 싶어요! 이유는 그냥 정말 단순하게, 여러 레퍼런스를 찾아보니 경량화에 중점을 두고 만들어져서 라이브러리 번들링에 많이 사용한다고 하더라구요! 롤업 공식문서에서도 그렇게 소개하구요.
터보팩은 Next.js 환경에서 번들링을 개선하기 위해 나왔고, Vite도 웹앱을 위한 빌드 툴이라 라이브러리 번들링을 하려면 라이브러리 모드를 별도로 설정해줘야 한다고 합니다!

rollup 사용 UI 라이브러리: naver/cfcs (크로스 프레임워크 라이브러리)
vite 사용 UI 라이브러리: chakra-ui (리액트 기반)
turbopack 사용 UI 라이브러리: radix-ui (리액트 기반)

레퍼런스
롤업 공식문서 소개: https://rollupjs.org/introduction/#overview
터보팩 개발 배경: vercel/next.js#48748 (comment)
여러 번들러 비교: https://bepyan.github.io/blog/2023/bundlers

[klmhyeonwoo]

롤업도 좋습니다요 :-)

[raymondanythings]

조사를 하다보니 의문점이 많이 생기게 되네요
라이브러리들 마다 각자 다른 방식의 번들링을 사용중이며, 심지어 빌드 스크립트를 직접 작성한 라이브러리도 많은 것으로 보여요.
번들러를 선택하기 전 우리에게 필요한 것이 무엇인지 먼저 정의하는 편이 좋을 것 같습니다.
하지만 먼저 번들러를 정해야 한다면, 설정이 가장 쉬운 vite 를 사용하는 것이 좋을 것 같다는 의견이에요 ( 변들러 바꾸는 것도 큰 비용은 아닐 것 같음 )

번들러 종류

1. parcel
2. esbuild
3. rollup
4. rspack
5. webpack
6. vite
7. swc

참고 라이브러리

1. headless UI - swc
2. MUI - webpack
3. framer-motion - rollup ( react 번들러 체크 로직 적용 )
4. rechart - webpack
5. next-ui - webpack parcel tsup
6. zag-js - tsup vite
7. react-spectrum - parcel
8. ark - vite
9. mantine - rollup esbuild webpack

[klmhyeonwoo]

저도 서치를 해보았는데, 제가 익숙한 번들러는 Rollup 이었거든요, Rollup은 아래와 같은 특징을 가지고 있습니다.

Rollup은 라이브러리 제작을 위해 설계된 도구로, 특히 모듈 번들링에 최적화되어 있습니다.

•	트리 쉐이킹: 코드의 미사용 부분을 제거하는 데 탁월합니다.
•	출력 형식: UMD, ESM, CJS 등 다양한 포맷으로 번들링이 가능하여, 여러 환경에 대응할 수 있습니다.
•	플러그인 생태계: 라이브러리 제작에 특화된 다양한 플러그인이 제공됩니다.
•	최적화된 번들링: 런타임 코드 없이, 필요한 것만 포함하여 가벼운 결과물을 만들어냅니다.

처음에는 Vite로 라이브러리를 만들게 되면 아무래도 주로 개발 서버로 사용이 되기 때문에 한계점이 존재한다고 생각을 했는데, @leeminhee119 가 언급해주신 라이브러리 모드로도 충분히 대체할 수 있다고 생각을 합니다. Vite의 경우 개발 환경에서는 esbuild를, 프로덕션 빌드에서는 내부적으로 Rollup을 베이스로 하고 있기 때문에 관련 설정들을 통해 Rollup에서 제공하는 기능들을 사용할 수 있을 것 같습니다.

Rollup 환경 구성을 진행해봤었는데 확실히 라이브러리에 관련된 다양한 설정을 할 수 있어 좋았던거 같아요, 다만 초기에 환경 구성을 잡는게 조금 오래 걸리기도 했어서 괜찮으시다면 어차피 Vite도 Rollup 베이스를 가지고 있기 때문에 추가적인 설정은 한번 확인은 해봐야겠지만 빠르게 진행할 수 있는 Vite 환경은 어떨까요?! 관련하여 의견을 여쭙니다! @leeminhee119, @raymondanythings

[leeminhee119]

Vite 좋습니다! 우선 익숙한걸로 시작하고 추후 변경이 필요하다 느끼면 마이그레이션하는 방향도 좋을 것 같아요 🤓

[raymondanythings]

내부적으로 구한하고자 하는 것 에 대해 정의하는 것이 중요할 것 같아요.
이후 요구사항에 맞는 기술스택을 선정한다면 효율적인 작업이 가능할 것이라 생각해요

[klmhyeonwoo]

현재 구현하고자 하는 우선순위는 레이어 서비스에서 사용되고 있는 공통 컴포넌트를 라이브러리화 하는게 목적이기 때문에 일단 Vite 환경으로 진행하고, 해당 Dicussion은 종료하겠습니다 : )