웹팩과 lazy loading 관련 질문

Question

안녕하세요 선생님, 좋은 강의 항상 감사드립니다. 웹팩과 Lazy Loading과 관련하여 궁금증이 생겨 질문드립니다. 웹팩의 기능은 웹을 나타내는데 필요한 모든 자원을 하나의 파일로 번들링 해주는 것으로 알고 있습니다. 이렇게 하는 이유는 필요한 자원을 매번 서버로부터 받아오기 보다 하나의 번들된 파일만 한 번만 받아와서 더 이상 서버에 요청하지 않아 성능이 좋아지기 때문으로 이해하고 있습니다. 그런데, Vue에서 lazy loading의 경우 실제로 그 페이지에 접근하려할 때 필요한 자원을 가져오는 것으로 이해하고 있습니다. 웹팩을 이용하는 경우 lazy loading의 장점을 취할 수 없는걸까요?

캡틴판교 · Answer

안녕하세요 동혁님, 좋은 질문 주셨네요 :) 웹팩의 정의는 잘 이해하신 것 같아요. 그런데 레이지 로딩이라고 하는 개념은 웹 서비스를 기준으로 했을 때 단순히 번들링된 파일을 불러오는 걸 떠나서 웹 리소스(css, json, 이미지 등)를 필요할 때 불러오는 걸 의미합니다. 레이지 로딩은 웹 서비스 최적화 관점에서 바라보시면 되구요. 웹팩은 레이지 로딩을 사용할 수 있는 한가지 방법으로 보시면 됩니다. 웹팩의 장점이 여러 개의 파일을 병합해서 한 개의 파일만 불러오는 이점이 있지만 반대로 너무 큰 애플리케이션일 경우 필요 없는 자원들을 모두 불러오는 건 불필요한 리소스를 로딩해야 하는 단점이 생기기 때문에 그 중간 지점을 잘 고민하고 설계하시면 됩니다 :)