babel-loader 궁금증

Question

강사님 안녕하세요. 강의 구매 후, 처음으로 질문을 하나 남겨 봅니다. 요즘 리액트로 개발을 해보고 있는데 웹팩에서 babel-loader 가 transfile 을 수행한다는 걸 강의로 알게됐네요. 리액트로 로컬환경에서 npm run start 로 서버 띄어놓고 개발을 하면, 소스 수정할 때마다 자동컴파일이 진행되던데요. 아마 이때 babel-loader 가 transfile 를 하는 듯 한데요. 소스파일의 갯수가 늘어날수록 이 compile 속도가 점점 늘어나는 것 같습니다. 혹시 소스파일이 늘어나도 Compile 속도를 빠르게 유지할 수 있는 웹팩 설정 같은데 있을까요? 이런 문제를 부딪혀보고 해결해보신 적이 있으신지 너무 궁금합니다.

shout · Answer

강사님 안녕하세요. Vite 같은 노번들 도구를 알려주셔서, 로컬개발환경만 Vite 로 테스트를 해보고 있습니다. 말씀해주신대로, Vite 를 사용하니 서버가 바로 Start 되는 장점이 있고 소스 일부만 수정했을 떄도 빠르게 확인해볼 수 있어서 개발생산성에 도움이 되는 것 같습니다.   그런데 노번들 도구라서 그런지, 서버 올리고 localhost:3000 을 접속하면 Webpack compile 시에는 개발자도구의 네트웍 탭에서 Request 갯수가 많지 않았는데 Vite 의 경우는 2000개 이상의 Request 가 발생하여, 테스트를 위해 첫페이지가 로드되기까지는 다소 시간이 걸리더라구요. 노번들도구의 특성상, 이부분은 좀 감수해야하는 부분일까요?

captain · Answer

안녕하세요 아리마님, 좋은 질문 주셨네요. 웹팩 번들 사이즈가 커지면 파일들을 번들링하기 위한 시간이 자연스레 증가합니다. 이건 웹팩의 내부 메커니즘이 그렇기 때문에 어쩔 수 없는 거구요. 해당 문제를 해결하기 위해서 노 번들 도구들도 최근에 많이 나와 있으니 한번 참고해 보시면 좋을 것 같아요 :) https://joshua1988.github.io/vue-camp/vite/intro.html