왜 16,384개의 번들 조합을 분석했는가?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

- 대상: 웹 개발자, 프론트엔드 개발자, 라이브러리 사용자

- 난이도: 중간 (라이브러리 최적화, 번들 분석 기술 이해 필요)

핵심 요약

• 16,384개의 플러그인 조합 분석: 2^14 조합을 통해 각 플러그인의 번들 크기를 정확히 측정
• 모듈형 아키텍처: neodrag v3는 14개의 독립적인 플러그인으로 구성되어 사용자 선택에 따라 번들 크기 최적화 가능
• 번들 분석 파이프라인: tsup, rollup, terser, brotli-size 등을 사용한 정확한 압축 크기 측정

섹션별 세부 요약

1. 분석 목적 및 배경

• 번들 크기 투명성 강조: 개발자가 사용하는 기능에 따라 번들 크기를 정확히 알 수 있도록 분석
• 모듈형 라이브러리 설계: neodrag v3는 기존의 단일 번들 대신 14개의 플러그인으로 구성
• 사용자 요구 반영: 기능별 사용자 선택에 따른 번들 크기 최소화를 목표로 함

2. 플러그인 시스템 및 기능

• 14개의 독립 플러그인: 예: bounds, grid, touchAction 등
• 플러그인 조합: 사용자 요구에 따라 플러그인을 선택적으로 포함 가능
• 코드 예시:

```ts

import { DraggableFactory } from '@neodrag/core';

import { bounds, grid } from '@neodrag/core/plugins';

export const factory = new DraggableFactory({ plugins: [bounds, grid] });

```

3. 번들 분석 프로세스

• 분석 단계:

1. 특정 플러그인 조합을 포함한 테스트 파일 생성
2. 임시 빌드 환경 설정 및 tsup을 통한 번들 생성
3. terser 최소화 및 brotli-size 압축 크기 측정
4. 임시 파일 정리

• 시간 소요: 1조합당 200ms 이상 소요, 총 16,384조합 분석 시 약 30분 소요

4. 조합 생성 알고리즘

• 이진수 기반 조합 생성:

```js

function* generateAllCombinations(allPlugins) {

const n = allPlugins.length;

for (let i = 0; i < Math.pow(2, n); i++) {

const combination = [];

for (let j = 0; j < n; j++) {

if (i & (1 << j)) {

combination.push(allPlugins[j]);

}

}

yield combination;

}

}

```

• 조합 범위: [] (무플러그인)부터 ['applyUserSelectHack', 'axis', ...] 등 모든 조합 포함

5. 결과 및 성능

• 분석 결과: 총 16,384조합 중 8,150개는 기본 플러그인 집합으로 추정, 8,234개는 실제 빌드 수행
• 하드웨어 요구사항: M4 Max + 64GB RAM 사용 시 30분 내 완료 가능
• 성능 영향: 복잡한 플러그인(bounds, controls)은 처리 시간 증가

결론

• 핵심 팁: 모듈형 라이브러리에서 사용자 선택에 따른 번들 크기 최적화를 위해 모든 조합 분석이 필수적
• 추천: tsup, rollup, brotli-size를 사용한 번들 분석 파이프라인을 도입하여 정확한 크기 측정 가능
• 결론: neodrag v3의 모듈형 설계는 개발자에게 정확한 번들 성능 투명성을 제공하며, 비슷한 시스템 구축 시 참고할 수 있음