yarn config set nodeLinker pnp
다시 nodeLinker 세팅값을 확인해서 yarn pnp가 제대로 적용되어 있는지 확인합니다.
yarn config get nodeLinker
.yarnrc.yml 파일에서 값이 잘 적용된 것도 볼 수 있습니다.
nodeLinker: pnp
마이그레이션
- 프로젝트에서 node_modules 폴더 완전히 제거하기
-
.bin 폴더의 바이너리 실행 파일을 제거하기
-
node 명령어 호출을 yarn node로 모두 대체하기
- 명령어가 실행되기 전에 자동으로 끼워 넣는 훅은 모두 직접 호출하도록 바꾸기(
yarn prestart)
code editor와 연동하기
- ZipFS extension을 설치하면, zip으로 압축된 패키지 소스코드 내부를 확인할 수 있다.
-
yarn dlx @yarnpkg/sdks vscode를 사용하면, 프로젝트의 typescript를 사용하도록 만들어줄 수 있다.
- 타입스크립트 파일이 포커스된 상태에서
Typescript: Select Typescript Version...을 클릭 > Use Workspace Version을 클릭한다.
vite project에서 yarn dev 실행시 node_modules가 생기는 원인
-
yarn dev와 같이 개발 서버를 실행할 때는 tree shaking이 진행되지 않아, 사용되지 않는 export가 제거되지 않는다.
- 그 결과 개발 서버 url로 접속했을 때 브라우저는 import되는 모듈 파일을 하나씩 다운로드 받는다.
- http 1.1에서 브라우저가 동일 오리진에 보낼 수 있는 요청의 개수는 보통 6개로 정해져있어, 네트워크 병목이 발생한다.
- vite는 개발 서버 실행 단계에서 패키지의 파일을 하나로 묶어서 node_modules/.vite 디렉토리에 캐싱한다. 이를 pre bundling이라고 부른다.
사실상 node_modules라는 이름으로 의존성이 되고 있는 것이 아니라, 개발 서버 실행 과정에서 재사용되는 캐시 파일이 저장되고 있는 것이다. node_modules 디렉토리의 본래 용도는 의존성 저장 용도이기에, yarn pnp에서 node_modules 디렉토리가 존재한다는 것이 어색하다고 판단하여 캐싱되는 디렉토리를 옮겼다.
-
vite.config.ts에 cacheDir 디렉토리를 .vite로 설정하고 .gitignore에 추가하였다.
export default defineConfig({
plugins: [react()],
cacheDir: ".vite",
});
-
.gitignore에 해당 디렉토리를 추가하여, git history에 등록되지 않도록 한다.
# vite
.vite
실험
lodash-es를 설치하고 pre bundling 과정이 없다면 실제로 네트워크 요청이 무수히 날아가는지 확인해보았다.
-
lodash-es를 의존성에 추가한다.
yarn add lodash-es
- vite.config.ts에서 최적화 대상에
lodash-es를 제외한다.
export default defineConfig({
plugins: [react()],
cacheDir: ".vite",
optimizeDeps: {
exclude: ["lodash-es"],
},
});
- 개발 서버를 실행하고 url로 접속한다. 브라우저 개발자 도구의 네트워크 탭을 확인한다.
yarn dev
결과
네트워크 탭1
600개가 넘는 요청이 보내졌다. 요청을 전부 처리하는데 800ms~1000ms가 걸렸다. 타임라인을 확인해보라.
이제 pre-bundling 옵션을 적용한 뒤에 결과를 확인하겠다. pre-bundling은 최적화를 꺼놓지 않는 이상 자동으로 실행되기에, (2)에서 진행한 과정을 모두 제거하고 결과를 확인하였다.
네트워크 탭2
4ms가 걸렸다. 모듈 다운로드 속도가 1000ms => 4ms로 250배가 빨라진 샘이다.
nodeLinker: node-modules로 실행할 경우 결과
pre-bundling을 껐을 경우 결과
Pre bundling을 껐을 경우 결과
timeline에서 확인했을 때 다운로드하는데 800ms~1000ms가 걸렸다.
pre-bundling을 켰을 경우 결과
pre bundling을 껐을 경우 결과
다운로드에서 20ms가 걸렸다. 40배~50배 다운로드 속도가 빨라졌다.
https://vite.dev/guide/dep-pre-bundling
https://vite.dev/guide/dep-pre-bundling#caching
https://yarnpkg.com/migration/pnp