앱 크기 최적화 — 번들 다이어트 전략

"Electron 앱이 200MB라고?" — Chromium 때문에 기본 크기가 크지만, 최적화하면 100MB 이하로 줄일 수 있습니다.

Electron 앱의 크기 구조

PLAINTEXT

전체 앱 크기 ≈ Electron 런타임 + 앱 코드 + node_modules
              (~80MB)           (~수 MB)    (가변)

Electron 런타임은 건드릴 수 없으므로, 앱 코드와 node_modules를 최적화합니다.

1. 불필요한 의존성 제거

BASH

# 프로덕션 의존성만 분석
npx depcheck

# 의존성 크기 확인
npx cost-of-modules

JSON

{
  "dependencies": {
    "better-sqlite3": "^9.0.0"
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.0.0",
    "vitest": "^1.0.0"
  }
}

devDependencies는 패키징에 포함되지 않습니다. 빌드/테스트 도구는 반드시 devDependencies에 넣으세요.

2. Tree Shaking과 번들링

JAVASCRIPT

// electron-vite를 사용하면 자동으로 tree shaking 적용
// vite.config.js
export default {
  build: {
    minify: 'terser',
    rollupOptions: {
      external: ['electron'],
    },
  },
};

3. node_modules 정리

YAML

# electron-builder.yml
files:
  - "dist/**/*"
  - "package.json"
  - "!node_modules/**/*.md"       # README 제거
  - "!node_modules/**/*.ts"       # TypeScript 소스 제거
  - "!node_modules/**/test/**"    # 테스트 파일 제거
  - "!node_modules/**/docs/**"    # 문서 제거
  - "!node_modules/**/.github/**" # GitHub 설정 제거

4. ASAR 압축

electron-builder는 기본적으로 ASAR 아카이브를 사용합니다. 추가 압축도 가능합니다.

YAML

asar: true
compression: maximum  # store(빠름) | normal | maximum(작음)

5. 아이콘과 리소스 최적화

BASH

# 이미지 최적화
npx sharp-cli --input assets/icon.png --output build/icon.png resize 512 512

불필요한 locale 파일 제거:

YAML

# electron-builder.yml
electronDownload:
  stripLocales: true  # 기본 locale만 유지

6. 크기 분석 도구

BASH

# 패키징 후 크기 확인
du -sh release/*

# 상세 분석
npx electron-builder --dir  # 인스톨러 없이 패키징만
du -sh release/mac-arm64/MyApp.app/Contents/Resources/

최적화 전후 비교 예시

항목	최적화 전	최적화 후
node_modules	150MB	30MB
앱 코드	5MB	1MB
locale 파일	20MB	2MB
총 설치 크기	250MB	120MB

면접 포인트 정리

Electron 런타임(~80MB)은 줄일 수 없으므로 앱 코드/의존성을 최적화
devDependencies와 dependencies를 명확히 구분
electron-builder의 files 패턴으로 불필요한 파일 제외
Tree shaking + minification으로 번들 크기 최소화
locale 파일 제거로 20MB 이상 절약 가능

앱 크기를 줄였으면, 다음은 런타임 성능 최적화를 알아봅시다.