Turborepo 훑어보기

TurboRepo

Turborepo is an intelligent build system optimized for JavaScript and TypeScript codebases ⇒

https://turbo.build/repo

Turborepo는 자바스크립트와 타입스크립트 코드들을 최적화하기위한 뛰어난 빌드 시스템 입니다.

Features

Incremental builds Building once is painful enough, Turborepo will remember what you've built and skip the stuff that's already been computed.
⇒ 빌드 는 한번으로 충분하고, 터보레포는 이미 빌드된 것을 다시 빌드하지 않는다.

https://turbo.build/repo/docs/core-concepts/caching

Core ConcepCacing Tasks
input 과 output 이 중요합니다.
여기서 input은 여러분이 작업물이고 output은 캐쉬된 파일과 로그(stdout)입니다

[[turborepo missing cache]]

주어진 input으로 hash를 생성하고 hash 안에 ouput을 저장한다.(node_nodules/.cache/turbo)

[[turborepo hitting the cache]]

hash가 있다면 stdout 로그를 replay한다.(workspace/.turbo/turbo-build.log)

Parallel execution

Execute builds using every core at maximum parallelism without wasting idle CPUs.
⇒ 유휴 CPU를 낭비하지 않고 모든 코어를 최대 병렬로 사용하여 빌드를 실행합니다.

[turbo vs lerna parallel]

Profile in your browser

Generate build profiles and import them in Chrome or Edge to understand which tasks are taking the longest.
⇒빌드 프로파일을 생성하고 Chrome 또는 Edge로 가져와 어떤 작업이 가장 오래 걸리는지 파악합니다.

Practice

turbo 설치
turbo.json 구성 및 프로퍼티 설명
저장된 해쉬와 output 확인
재실행 및 변경 실행시 차이점 확인
프로파일 및 그래프 확인
종속성 추가하는법

turbo 설치하기

yarn add turbo -D

turbo.json

{
	"$schema": "https://turbo.build/schema.json",
	"pipeline": {
		"build": {
			"inputs": ["src/**/*.tsx", "src/**/*.ts"],
			"outputs": ["dist/**", "storybook-static/**"],
			"dependsOn": ["^build"]
		},
		"lint": {},
		"dev": {
			"cache": false,
			"persistent": true
		},
	}
}

[turborepo test time]

[turborepo profiler]

[turborepo graph]

그래프를 보기 위해선

https://graphviz.org/download/

https://graphviz.org/download/설치 필요

기타

Vercel에서 인수하였고, Go로 작성된 코드를 Rust로 마이그레이션 진행중이다.

참고:

https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo/

https://engineering.linecorp.com/ko/blog/monorepo-with-turborepo/
참고:

https://d2.naver.com/helloworld/7553804

buy me a coffee