dev-dependencies를 두고 구내 식당에서 펼쳐진 토론

제육을 앞에 두고 시작된 토론

새로 입사하신 신입 프론트엔드 팀원분과 점심을 먹던 도중,

번들 사이즈와 관련한 대화를 나누게 되었는데요.

당시 제가 최적화 작업을 진행하고 있던 터라 이에 대한 팀원분의 견해를 여쭙고자 했습니다.

그러던 중, 팀원분이 던진 질문에 저는 상당히 당황했는데요.

 

"???: 지원님 devDependencies는 번들러에 영향을 미칠까요, 안 미칠까요?"

라는 질문을 받자마자 저는 영향을 미치지 않는다고 답했습니다.

 

웹/앱 실행에 필요한 패키지를 dependencies로 설정하고, 번들러가 생성하는 결과물에는

dependencies에 설치된 내용들만 포함된다고 덧붙였고요.

 

하지만 팀원분의 의견을 달랐습니다.

"devDependencies는 번들러에 포함됩니다!"라고요.

---

팀원분이 주장하신 devDependencies가 번들러에 포함되는 이유

기본적으로 devDependencies가 포함되는 것을

설정을 통해 번들러에 포함되지 않게 한다는 입장이셨습니다.

 

1) NODE_ENV=production이라는 설정과

2) --production 플래그(= npm install --production OR yarn install --production)를

사용한 명령어로 devDependencies를 제외한 인스톨이 가능하다고 언급하시며

CI/CD 구축을 할 때, 위의 2가지 옵션을 추가해

devDependencies를 제외하고 최적화를 진행할 수 있다고 말씀해 주셨는데요.

 

이야기를 듣고 오.. 많이 알아보셨구나라고 느꼈고

뒤이어 저의 생각을 말했습니다.

---

내가 devDependencies는 번들러에 불포함된다고 말한 이유

Webpack과 같은 번들링 도구가 development 환경에서

devDependencies를 사용하여 build 하는 과정이 존재하지만,

Production 환경에서는 최적화된 번들을 생성하고,

이때는 devDependencies는 사용되지 않는다고 말씀드렸습니다.

 

또한 팀에서 Next.js와 Vercel을 사용하고 있다는 점을 고려해 보자고 말하며

next build 명령어를 사용하여 production 환경을 생성할 때,

Next.js는 내부적으로 Webpack을 설정하여 최적화된 번들을 생성한다고 설명했습니다.

 

이 과정에서 devDependencies는 사용되지 않으며,

필요한 dependencies만 포함된 최종 번들이 만들어진다고 말했는데요.

 

설명을 하며 예외가 있을 수 있겠다 덧붙였습니다.

devDependencies에 있는 패키지가 production 환경의 코드에서

import 되면 번들에 포함되겠다는 생각이 들었는데요.

 

이런 상황이 없을 듯싶지만 예외 상황을 고려해

동료분이 언급한 CI/CD 구축을 할 때 옵션을 추가해

Production 환경에서는 devDependencies에 있는 패키지들을

사용하지 않도록 관리하는 것이 좋겠다고 말하며 마무리 지었습니다.

---

밥을 먹으면서 개발 이야기로 긴 이야기를 하는 게 처음이었는데,

제가 놓치고 있던 부분을 말씀해 주셔서 참 감사한 하루였습니다.