Wrapper 패턴을 통해 import를 효율적?으로 관리하는 글을 봐서
한번 따라해보는김에 기록으로 남기기 위해 작성했음
vite를 사용했으며, 추가적인 코드는 없음
import - lodash
lodash 전체를 import 했고 별다른 특징은 없는 코드다
해당 코드를 run build 했을 때 번들 사이즈는 아래와 같다.
아무것도 없지만 패키지만 설치했을 때 절반을 차지 중
최적화 1 - 개별 import 해오기
lodash의 원하는 기능만을 가져올 경우
번들 사이즈는 다음과 같다. 
전체 import _ from 'lodash'를 사용했을 때는
번들 사이즈가 562KB였지만 개별 import를 사용하면
6.27KB로 확 줄었음
562KB -> 6.27KB (대밗이쥬?)
이렇게 개별 import를 하게되면 번들 사이즈를 줄일 수 있다는 장점이 있지만
개별적으로 가져와야 한다는 것은 아래와 같은 단점을 지닌다.
개별 import의 단점
-
여러 파일에서 import를 리팩토링해야 함:
lodash를 10개 이상의 파일에서 사용 중이라면, 각각의 파일에서 lodash를 import하는 방식을 모두 바꿔야 합니다.
즉, 10개 이상의 파일을 리팩토링해야 하므로, 이는 매우 번거로운 작업이 되며 결국 크고 불필요한 PR이 생길 수 있습니다. -
변경 누락 가능성:
업데이트가 필요한 파일을 일부 놓치기 쉽기 때문에, 코드베이스의 일부에서 동작이 일관되지 않거나 에러가 발생할 위험이 있습니다. -
여러 브랜치에서의 충돌 처리 어려움:
만약 여러 브랜치에서 PR 병합 충돌이 발생했다면, 그리고 그 충돌이 각 파일마다 다른 import 방식 때문이라면,
각 파일을 하나씩 확인해야 합니다.
하지만 wrapper 파일을 사용하는 방식이라면, 그 파일만 보면 되고, 어떤 버전을 유지할지 한눈에 파악할 수 있습니다.
Wrapper Pattern 적용
라이브러리에 Wrapper Parttern을 적용하면 개별 import를 적용함과 동시에 위의 단점들을 보완할 수 있다는 장점이 있다.
Wrapper 패턴은 번들 사이즈를 줄이진 않습니다!!
이렇게 사용하게되면 번거로움 import 경로를 안정적으로 처리할 수 있게 된다.
개별 import와 동일한 번들 사이즈를 유지하는 것을 확인할 수 있음
단점
하지만 다음과 같은 단점도 존재한다.
1. 복잡성 증가 - Wrapper는 추가적인 추상화 계층을 도입하기 때문에 복잡해질 수 있다.
2. 파일 개수 증가 : lodashWrapper.js, motionWrapper.js처럼 여러 개의 Wrapper 파일을 만들게 되면 추가 파일이 너무 많아져 프로젝트 내 탐색이 어려워질 수 있다.
꽤 괜찮은 패턴인것 같아서 소개하기위해 가져왔음
아래는 혹시라도 vite-visualizer를 써볼 사람을 위해 vite.config.js파일
import { defineConfig } from "vite";
import { visualizer } from "rollup-plugin-visualizer";
import react from "@vitejs/plugin-react";
// https://vite.dev/config/
export default defineConfig({
plugins: [
react(),
visualizer({
filename: "stats.html",
open: true,
template: "treemap",
gzipSize: true,
brotliSize: true,
}),
],
});원문
