인프런 커뮤니티 질문&답변

아리마님의 프로필 이미지

작성한 질문수

프론트엔드 개발자를 위한 웹팩

babel-loader 궁금증

22.01.25 23:50 작성

·

198

1

강사님 안녕하세요.

강의 구매 후, 처음으로 질문을 하나 남겨 봅니다.

요즘 리액트로 개발을 해보고 있는데 웹팩에서 babel-loader 가 transfile 을 수행한다는 걸 강의로 알게됐네요.

리액트로 로컬환경에서 npm run start 로 서버 띄어놓고 개발을 하면, 소스 수정할 때마다 자동컴파일이 진행되던데요.

아마 이때 babel-loader 가 transfile 를 하는 듯 한데요.

소스파일의 갯수가 늘어날수록 이 compile 속도가 점점 늘어나는 것 같습니다.

혹시 소스파일이 늘어나도 Compile 속도를 빠르게 유지할 수 있는 웹팩 설정 같은데 있을까요?

이런 문제를 부딪혀보고 해결해보신 적이 있으신지 너무 궁금합니다.

답변 2

0

아리마님의 프로필 이미지
아리마
질문자

2022. 02. 21. 18:46

강사님 안녕하세요.

Vite 같은 노번들 도구를 알려주셔서, 로컬개발환경만 Vite 로 테스트를 해보고 있습니다.

말씀해주신대로, Vite 를 사용하니 서버가 바로 Start 되는 장점이 있고

소스 일부만 수정했을 떄도 빠르게 확인해볼 수 있어서 개발생산성에 도움이 되는 것 같습니다.

 

그런데 노번들 도구라서 그런지, 서버 올리고 localhost:3000 을 접속하면

Webpack compile 시에는 개발자도구의 네트웍 탭에서 Request 갯수가 많지 않았는데

Vite 의 경우는 2000개 이상의 Request 가 발생하여, 테스트를 위해 첫페이지가 로드되기까지는

다소 시간이 걸리더라구요.

노번들도구의 특성상, 이부분은 좀 감수해야하는 부분일까요?

 

  

0

장기효(캡틴판교)님의 프로필 이미지

2022. 01. 26. 23:24

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

https://joshua1988.github.io/vue-camp/vite/intro.html

아리마님의 프로필 이미지
아리마
질문자

2022. 01. 27. 09:33

결국, 시스템의 규모가 커져서 모듈이 점점 늘어나는 상황에서는 웹팩을 포기하고 Vite 와 같은 도구를 검토하는 것이 현명할 수 있다라는 말씀이시군요. 강사님 통해서 웹팩을 공부하고나니 또 추가로 공부할 꺼리가 생겨버렸네요 ㅎㅎ 

힌트를 주셔서 감사드립니다.