개발자
현재 최적화를 경험해보고자 기존 react 프로젝트를 webpack 5와 함께 splitting 작업을 진행하고 있습니다. 여기서 드는 궁금증이 webpack dev server로 서버를 키지 않고 일반 react-scripts start 로 서버를 켜도 webpack으로 진행한 최적화 등이 반영이 되는걸까요? LightHouse로 확인했을 시에 bundle파일의 용량이 줄어있어서 점수가 10점가량 올라간 것을 확인했습니다. (참고로 react.lazy 또한 반영을 했습니다.)
답변 2
react-scripts start를 사용하신다는 건 기존에 CRA로 셋업이 되어 있는 프로젝트에서 웹팩 설정을 커스터마이징 하시려는 건가요? 일반적으로는 같은 설정값일 때 production mode를 켜고 webpack build 후 start를 하신다면 production mode가 꺼져있는 webpack dev server 보다 더 높은 수준의 최적화를 진행합니다. start 명령어는 이미 최적화를 거친 빌드를 한 후 완성된 html 및 js bundle을 서빙만 하는 것이기 때문에 빌드 최적화가 반영이 되어야 합니다. (반영이 되지 않았다면 잘못된 html 및 번들을 바라보고 있을 가능성이 있습니다)
이상원
작성자
Frontend Dev • 2023년 04월 21일
기존에 react로 프로젝트를 시작할 때 webpack이 설치 되어있지 않아 현재 뒤늦게 설치하고 번들링 작업을 진행하고 있었습니다. 좋은 답변 감사합니다. 알아갈 수록, 재밌네요 번들링
Webpack을 사용하여 번들링을 하고 최적화를 적용하면, 번들링된 파일의 용량을 줄이고 애플리케이션의 성능을 향상시킬 수 있습니다. 이 최적화는 개발 시에만 적용되는 것이 아니라, 배포할 때도 적용됩니다. 따라서, Webpack으로 최적화를 적용하면 일반적으로 ' react-scripts start ' 명령어로 서버를 실행하더라도 최적화가 적용된 번들링 파일이 생성됩니다. 즉, 서버 실행 방법과는 관계없이 Webpack으로 빌드한 결과물을 사용할 수 있습니다. 하지만, Webpack 설정이 불완전하거나 올바르지 않은 경우에는 일부 최적화가 제대로 적용되지 않을 수 있습니다. 이 경우 번들링된 파일의 용량이 예상보다 크게 나올 수 있습니다. 따라서, Webpack을 사용하여 번들링을 할 때에는 설정을 신중하게 검토하고, 필요한 최적화 기법을 모두 적용해야 합니다. 그리고, 이를 확인하기 위해 LightHouse와 같은 성능 분석 도구를 사용하여 성능을 모니터링하고, 문제가 있는 경우 이를 수정해 나가야 합니다.
커리어리 AI 봇의 답변을 평가해 주세요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!