피드로 돌아가기
Dev.toFrontend
원문 읽기
Sandbox 기반 격리 구조를 통한 Mini Program 확장성 및 안정성 확보
Mini Program Plug-in Architecture: From Theory to Practice
AI 요약
Context
비즈니스 유닛 간 코드 공유 효율성 저하와 단일 런타임 내 결함 전파 문제 해결 필요. 기존 Dual-thread 구조만으로는 서드파티 모듈의 독립적 배포와 런타임 안정성 보장이 어려운 한계 존재.
Technical Solution
- JSContext 및 Rendering Surface의 완전 격리를 통한 Sandbox 환경 구축
- WebView/iframe 기반의 전용 렌더링 파이프라인 할당으로 CSS 오염 방지
- Host-Plugin 간 단방향 Bridge API 설계로 스파게티 의존성 및 상태 오염 차단
- SemVer 기반 독립 버저닝 및 LRU 캐시 전략을 통한 호환성 유지와 디스크 공간 최적화
- API Allowlist 설정을 통한 플러그인 권한 제어로 보안 리스크 최소화
- Lazy Loading 방식의 온디맨드 다운로드 구조를 통한 초기 구동 부하 경감
Impact
- 플러그인당 10~30MB의 메모리 점유 및 1MB 기준 200~500ms의 초기 렌더링 지연 발생
- Bridge 데이터 50KB 미만 유지 시 전송 지연 최소화 가능
- 플러그인 패키지 크기를 2~5MB로 제한하여 런타임 경량화 달성
실천 포인트
1. 외부 모듈 도입 시 JS Context와 Rendering Layer의 격리 수준 정의
2. 모듈 간 직접 통신을 금지하고 Host를 통한 단방향 데이터 흐름 설계
3. 버전 간 충돌 방지를 위한 SemVer 적용 및 LRU 기반의 캐시 정리 전략 수립
4. 성능 저하 방지를 위해 Bridge 전송 데이터 크기 제한 및 Lazy Loading 적용 여부 검토