intro

웹 사이트의 성능 최적화를 위한 많은 시도가 있지만 특별히 tree shaking 은 무엇인지 알아보고 웹팩4에서 어떻게 이를 활용할 수 있는지에 대해 알아보자

테마를 변경하고자 할 때

가끔 집안의 가구 배치를 바꾸면 새로운 기분이 드는 것 같이 블로그의 옷도(theme) 가끔씩 갈아 입혀주면 기분전환에 좋다. 지킬 블로그를 처음 개설하고 디폴트 테마인 minima 로 몇개월간 운영을 해왔는데 다른 블로그들의 멋진 테마들을 보고 욕심이 나서 내 블로그에도 새 옷을 입혀 보기로 했다. 지킬블로그 테마는 jekyllthemes.org 에서 여러 종류의 테마들을 확인할 수 있다. 나는 심플하고 깔끔한 whiteglass 로 테마를 변경해 보았다.

충분한 설계없이 만들어진 자바스크립트

자바스크립트는 1995년 Brendan Eich 에 의해 처음 이 세상에 모습을 드러냈다. 초기 자바스크립트의 요건은 정적인 웹페이지에 동적인 요소를 가미하는 정도였다. 초기 요건은 매우 단순했기 때문에 Brendan Eich 는 자바스크립트 초안을 일주일? 만에 만들었다고 한다. 그만큼 자바스크립트는 다른 언어들에 비하여 설계가 탄탄하지 않았다.

Code Spliting 왜 필요한가

webpack 을 이용하여 spa 애플리케이션을 만들면 결국 모든 소스파일이 하나의 파일로 (ex, index.bundle.js) 번들링되는데 개발이 진행되면서 여러가지 라이브러리들을 사용하게 되면 번들파일의 용량이 4~5MB 이상으로 금방 무거워질 수 있다. 이렇게 될 경우, 네트워크 상황에 따라 해당 js를 처음 내려받는데 오랜 시간이 걸릴 수 있다. 이럴 경우에는 index.bundle.js 파일을 splitting 하여 다운로드 받는데 걸리는 시간을 줄일 필요가 있다. 이때 코드를 나누는 방법은 성격에 따라 정적스플리팅, 동적스플리팅으로 나눠볼 수 있는데 차례대로 그 방법을 살펴보도록 한다.

npm 모듈 삭제

node_module 폴더에서 패키지 삭제. package.json 에서 내용을 삭제하지는 않는다

npm uninstall <package>

package.json 에서까지 삭제하려면 --save or --save-dev 옵션을 주어야 한다