Esbuild 사용 후기 및 까먹지 않기 위해..."기록"

이에스빌드! 아 이름하나 잘졌다. Eslint, EsBuild...

Webpack 설정을 하다 Esbuild를 적용해 SSR React를 구현해본 결과.

 

플러그인 등록도 손쉽고, 상식적이며, 번들되는 구조나 처리방식도 매우 상식적이면서 대중적이다.

 

매우 빠르게 빌드해주는 캐시가 무척이나 마음에 들고, liveReload를 직접 만들어 테스트해봤다.

상당히 품질도 마음에 들고, 무엇보다 vite, 스노우팩의 핵심 라이브러리로 직접 해본게 느낌이 좋았다.

 

랜더서버를 직접 구현한 경우, liveReload를 구현하는게 좀더 효과적이다.

 

scripts 폴더를 만들고 build.js를 구현할때는 cjs 방식으로 일괄처리되도록하며

require.cache[require.resolve('')] 로 cjs module 로드된 캐시를 비워주면서 사용하는 것을 권장한다.

 

react-refresh를 도입하는 것도 좋으나 ssr인 경우 서버도 리로드해주는 과정이 있음으로

 

client 빌드 - server 빌드 순으로 한 뒤 reload websocket+webWoker로 묶어 처리해준다.

이후 브라우저쪽에 devServer hot JSON을 날려 리로드 시켜준다.

 

웹팩으로 작업했다면 빌드시간이 최소 15초 이상은 소모될일이 1.5초가 걸린다.

이는 node_modules 폴더 안의 번들할 파일들의 변동이 없으면 미리 번들화해둔 덕분에 머지만해서 나오는 속도가 매우 흡족하게 만든다.

 

중요한 사실은 개발 디버깅 시간이기에. 여러 구현요소들을 빠르게 적용해주는 과정을 본디 익혀둔 상태에서 vite, 스노우팩으로 넘어가는 일렬의 과정이라 생각하련다. 그럼에도불구하고 번들된 리엑트는 무겁다. 스벨트가 승리자인것일까.