본문 바로가기

optimization

 (3)
[Webpack + Opt] Code splitting (코드 스플릿팅) Intro. ( 방법만 궁금하시면 아래로 쭉 내려주셔요!) 아무런 설정을 안할 시, 웹팩은 모든 소스파일들을 하나의 파일로 번들링합니다. 하나의 파일로 번들링한다는게 나쁜건 아닙니다만, 예를 들어, 특정 피쳐 A가 있고, A의 경우, 특정 상황이 아니면 사용하지 않는다 하면 어떨까요? 가장 대표적으로 node_modules가 있겠습니다. 실제로 node_modules를 열어보면 굉장히 많은 모듈들이 있으나, 실제로 주로 사용하는 것은 몇개 안된다는걸 깨달으실 겁니다. 그리고 렌더링 관점에서 따지자면, 더욱 그 수는 줄어들것이구요. 만약 하나의 파일로 번들링된다면, 굉~장히 거대한 번들이 될테고, 브라우저 캐싱 관점에서도 굉장한 비효율이 야기되겠죠? 게다가 번들 하나의 사이즈가 크기 때문에, 피쳐 A와 같..
[Webpack + Opt] 이미지 애셋 압축하기 (image-minimizer-webpack-plugin) Intro. load time 최적화를 달성하기 위해, 당연하지만 파일의 사이즈는 작을 수록 더 좋은 퍼포먼스를 보입니다. 그렇기에 image-minimizer-webpack-plugin 플러그인 패키지를 통해 빌드 시, 애셋을 압축할 수 있는 방법을 소개해보려합니다.. ( image-webpack-loader가 더이상 업데이트를 안한다고 하네요. ) Goal Method 해당 플러그인은 imagemin , squoosh , sharp , svgo 이렇게 4가지를 압축 알고리즘으로 추천하고 있고 별도로 커스텀 압축 알고리즘을 사용해도 되나, 이번 글에선 imagemin을 통해 구성해보겠습니다. 각 애셋별 압축 알고리즘 png : pngquant jpg,jpeg : mozjpeg svg : svgo 를..
[Webpack + opt] css 최적화 Intro. 배포 환경에선 당연히 더 나은 UX를 위해 번들 사이즈를 줄여야합니다. 이번 글에선 webpack 번들링 과정에서 css 파일들을 어떤식으로 최적화 할 수 있을지 이야기 해보겠습니다. Index 1. CSS 압축 2. 코멘트 제거 3. 안쓰는 CSS 제거 이렇게 크게 3가지 방법이 있습니다. Method CSS 압축 & comment 제거 1. CSSMinimizerPlugin을 설치합니다. 해당 플러그인은 기본적으로 CSS Nano 와 동작방식이 같습니다. yarn add -D css-minimizer-webpack-plugin 2. config파일 내, optimization 객체에 해당 플러그인을 추가합니다. module.exports = merge(common, { ..., optim..

티스토리툴바