자바스크립트는 같은 크기의 이미지나 웹폰트보다 브라우저가 처리하는 비용이 많이 든다.
이미지는 디코딩만 하면 되지만, js는 파싱하고 컴파일하고 실행까지 해야 한다.
따라서, 자바스크립트의 최적화가 최우선이 되어야 한다.
webpack analyse, webpack visualizer, webpack bundle analyzer (추천)
용량별로 시각화를 해준다. 사용중인 라이브러리의 디펜던시를 확인 할 수 있다.
용량이 큰 라이브러리는 작은 라이브러리로 대체하고, 용도가 겹치는 라이브러리는 하나로 통일하는게 번들 최적화의 시작이다.
npm은 트리 구조로 필요한 버전을 모두 받는 방식이다.
한 라이브러리에 디펜던시가 있으면 그 라이브러리 아래에 node_modules 폴더를 만들어서
디펜던시의 디펜던시를 만듭니다.
npm dedupe은 중복된 모듈을 줄일수 있는 명령어이다.
yarn도 yarn deduplicate로 중복된 라이브러리를 제거 해야 한다.
yarn2에서는 yarn dedupe 명령어가 생겼다.
babel-plugin-lodash를 사용하여 lodash의 필요한 기능만 import 한다
bundle phobia로 필요한 라이브러리를 선택하자 !!
tree-shaking : 불필요한 코드를 정적 분석으로 제거
side-effect 찾기
webpack-cli를 사용하면 stats 옵션
next.js에서는 StatsWriterPlugin을 사용한다
const { StatsWriterPlugin } = require('webpack-stats-plugin');
new StatsWriterPlugin({
filename: 'stats.json',
stats: {
assets: true,
entrypoints: true,
chunks: true,
modules: true,
},
})