# uglify

buddle6091

이제 Webpack을 통하여 본격적인 Optimize를 진행해보려고 한다! 사실 Webpack5가 도입이 되면서 아주 기본적인 최적화를 default로 진행을 해준다고 한다. 하지만, 이외의 Plugin과 Optimaization 옵션을 적절하게 사용하면 번들크기를 줄이는데 도움이 되고, 번들을 줄이는 매커니즘(?)을 배워가는 과정이 될 것이라 생각하니 쪼매 설렌다. Webpack Analyzer Plugin Webpack Analyzer Plugin은 Bundle 들의 크기 및 구성이 어떻게 이루어져있는지 시각적으로 보여주는 Plugin이다. 이전에 [최적화 포스트](https://velog.io/@buddle6091/%EC%84%B1%EB%8A%A5-%EA%B0%9C%EC%84%A0-4.-LightHouse-%EC%A7%84%EB%8B%A8%ED%95%B4%EC%84%9C-%EB%82%98%EC%98%A8-%EB%AC%B8%EC%A0%9C%EC%A0%

s2ksh77

최근상황 요즘은 회사에서 캘린더를 담당하고 있다. 캘린더 모듈을 슈퍼앱 환경 앱스토어에 등록하고, 여러 유저가 사용할 수 있도록 하는 과정을 진행하였다. 웹팩 최적화나 lighthouse 같이 이론상으로만 알고는 있었지만 적용해보지 못한 것을 해보았던 경험을 적어 본다. LightHouse 확인 그간 개발과 기능 추가에만 열중한 탓에 개발된 환경이 얼마나 최적화 되어있을지 확인해보지 못하였어서 local환경에서 크롬의 lighthouse를 확인해 보았다. > 이럴수가.. perfomance 환경이 31점이라는

june_summer

0. 들어가며 프론트엔드 개발자로서 웹을 빠르게 로딩시키는 것은 중요한 일이다. 화면이 빠르게 로딩되지 않으면, 유저의 이탈이 일어나고 유저의 경험도(흔히 UX라고 부르는) 좋을 수 없다. 그래서 이번엔 웹을 빠르게 로딩하는 방법 중 하나로 minify와 uglify에 대해 조사해보았다. 1. minify란? minify란 말 그대로 경량화 혹은 압축을 뜻한다. 여기서 말하는 경량화(압축)란 코드 내에서 사용하지 않는 변수명, 불필요한 줄바꿈이나 공백, 들여쓰기 등을 삭제하는 것을 뜻한다. 다른 방법으로는 줄여서 사용할 수 있는 긴 구문(ex. if문)을 축약해서 사용하는 것도 포함된다. 이렇게 파일을 지우거나 줄여씀으로써 최종적으로는 번들의 크기를 줄일 수 있다. 2. uglify란? 그럼 uglify란 무엇일까? 이또한 이름에서 유추해볼 수 있듯 난독화를 뜻한다. 난독화에서는 우리가 공들여 작성한 함수명이나 변수명을 알아보기 힘들게 작성하는

tkmoon1020

Webpack5로 사이드 프로젝트를 시작하였다. 필자에게 가장 익숙한 uglifyjs-webpack-plugin을 사용하려 했으나, webpack4까지만 uglify-js를 사용하고, webpack5 부터는 es6를 지원하지 않는다는 이유로 terser로 교체되었다고 한다. 1. Minifier 비교 가장 효율적인 방법을 찾기 위해 Minifier 벤치마크 결과를 찾아보았다. 관련 링크 webpack4와 webpack5의 플러그인인 uglifyjs와 terser를 비교해 보았다. React v17.0.2 Original Size: 72.14kB를 각각의 Minifier로 압축했을 경우 결과는 아래와 같다. |--------|Minified Size| Time| |:------:|------------:|----