끄적끄적

트리쉐이킹 트리쉐이킹이란 말을 처음 들어보는 사람도 있을 것이다. 말 뜻 그대로 풀이하면 나무 흔들기.. 나무를 흔들어 죽은 나뭇잎을 떨어뜨리는 것처럼 필요없는 코드들을 제거해주어 번들파일의 크기나 번들링의 시간을 줄여주는 작업을 트리쉐이킹이라고 한다. 대체적으로 어떠한 작업들이 이루어질까? ES6 이상의 모듈 구문은 정적 구조에 의존한다. import, export... 이를 가지고 의존성을 보고 해당 소스들을 번들링 하는데 webpack4에서 sideEffects가 추가 되었고, 설정을 false로 프로퍼티를 표시하여 사용하지 않는 export는 제거해도 괜찮다는 것을 webpack에 알려줄 수 있게 되었다. 또는 아래와 같은 형식으로 제거되는 것을 방지할 수 있다. "sideEffects": ["...

웹팩은 자바스크립트 모듈 번들러입니다. 오픈소스자바스크립트이며, 현재 프론트엔드 개발에 있어 웹팩이 없이 개발을 한다는 것은 상상할 수 없을 정도로 필수로 알아야하는 패키지입니다. 웹팩은 자바스크립트뿐만 아니라 Html,css까지도 번들링을 시키고 파일을 압축,의존성,캐싱관리,개발환경 등 유용한 기능 및 환경을 제공합니다. 물론 Webpack이 없이도 개발은 가능합니다. 예전의 방식대로 cdn방식으로 일일히 불러와서 사용하거나 다른 패키지를 사용하셔도 됩니다. 예를들어 common.js,require.js,grunt,gulp등등 말이죠. 하지만 이 패키지들은 웹팩만큼 광범위한 기능을 제공하지 않습니다. 단순히 모듈 번들러로써의 기능을 제공할 뿐이죠. 기본방식의 아래의 코드를 볼께요. 전에는 이런식으로 필..