이 글은 적고 나서 더 찾아보니 별로인 글인 것을 알았습니다.... 제가 한 방식은 아주 조금의 성능 향상 밖에... 없을 것 같고 해당 글을 참고 하시면 진짜 답을 얻을 수 있을 것 같습니다.
'ES5를 사용하는 사용자들을 위해 ES5로 트랜스파일 해버리면 ES6 사용자들은 JS 번들의 용량이 커지는 등으로 인해 속도가 느려지는 등의 불이익이 있을 수 있는데 이럴 때는 어떤 식으로 배포하는게 좋을까'
면접 때 받은 질문이다. polyfill을 사용해서 하면 된다... 라고 대충만 알고 있었어서 'polyfill을 사용하면 될 것 같습니다.' 라고 말했다. 하지만 제대로 된 답은 그것이 아니었고 실무에서의 경험이 필요할 것 같아 DND 멘토님들께 질문 하였다.
고맙게도 친절히 답변을 해주셨다.
ES6에는 존재하는데 ES5에는 없는 경우에 polyfill 코드를 따로 추가해야한다고 하셨다. 대표적으로 array의 map이 있는데, array.prototype.map에 직접 해당 기능을 하는 코드를 만들어서 넣어주는 방식이라고 한다. 그러나 es6에서는 다음과 같은 기능을 하는 코드를 넣어버리면 오히려 에러가 날 수도 있고 초기 로딩 속도가 느려질 수도 있다고 한다. 따라서 코드 스프리팅을 해놓고, 필요한 경우에만 불러올 수 있도록 하면 된다고 하셨다.
그러면 polyfill은 무엇이고, 코드 스플리팅은 무엇이고, 필요한 경우는 어떻게 확인할 수 있을까?
polyfill은 기본적으로 지원하지 않는 이전 브라우저에서 최신 기능을 제공하는 데 필요한 코드 (일반적으로 웹의 JavaScript)이다. babel을 사용하면 문법을 변환만 시켜준다. 하지만 ES5에 없는 문법은 변환을 하지 못 한다. 그래서 @babel/polyfill을 사용하면 된다. polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한다. 즉, babel은 컴파일타임에 실행되고 @babel/polyfill은 런타임에 실행된다. (@babel/polyfill은 deprecated 됐다고 한다. import "core-js/stable";
import "regenerator-runtime/runtime"; 를 사용해주라고 한다.)
코드스플리팅은 커지는 js 번들을 여러 파일로 나누어 필요한 시기에만 불러오도록 하는 기술이다. 필요하지 않는 코드까지 한번에 불러오도록 하면 앱의 성능에 좋지 않을 수 있다. 현재 필요한 코드만 불러올 수 있게 함으로써 성능을 향상 시킨다.
사용자의 브라우저를 확인하는 방법은 다음의 블로그를 참고하면 될 것 같다. 실제로 작성해보니 잘 되는 것 같다.
그러면 처음 로드 되었을 때 사용자의 브라우저를 확인 한 다음 만약 사용자가 IE가 아니라면 그냥 ES6에서 babel로 ES5로 변환 된 파일로만 사용하고 IE라면 poliyfill까지 추가하면 낫지 않을까 싶다.
참고
https://medium.com/@ljs0705/babel-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-a1d0e6bd021a
https://velog.io/@odini/Code-Splitting%EC%BD%94%EB%93%9C-%EC%8A%A4%ED%94%8C%EB%A6%BF%ED%8C%85
