이렇듯 길이가 조금 있는 소스코드는
최대한 압축하면 사이트 반응속도를 좀더 개선할 수 있습니다.
위 코드는 개발 모드가 아닐 때 min.js 파일을 호출하기 위한 함수입니다.
app.js를 uglifsjs 혹은 기타 웹사이트에서 압축을 하여 app.min.js 파일을 만든 결과 파일의 크기가 어느 정도 작아진 것을 볼 수 있습니다.
uglifsjs로 압축
npm install uglify-js -g설치가 완료되면 압축할 자바스크립트 파일이 있는 디렉토리로 이동합니다. 그리고 난 뒤 아래의 명령어를 입력하세요.
uglifyjs app.js --output app.min.js
정상적으로 압축된 것을 볼 수 있습니다.
설치가 번거로우시면 웹사이트에서 자바스크립트 압축을 도와주는 사이트도 있습니다.
javascriptcompressor로 압축
위에 소스코드를 붙여놓고 Compress를 한 다음 소스코드를 가져와서 사용하셔도 됩니다.
uglifsjs를 사용하여 압축한 것과 동일한 크기입니다.
다만 uglifsjs는 지수 계산을 하고 javascriptcompressor는 숫자를 그냥 가져옵니다. 압축 크기와는 크게 상관없음.
uglifsjs 지수 계산함
javascriptcompressor 지수 계산하지 않음
uglifsjs로 압축 해제
uglifyjs app.min.js --beautify --output app.js
원복이 된 것을 볼 수 있습니다. 처음에 312KB였지만 원복을 했을 때 298KB인 것을 볼 수 있습니다. 이는 압축할 때 주석이 모두 제거되었기 때문입니다.
beautifier
beautifier 웹사이트에서 압축 해제도 가능합니다.
min.js 파일을 가져와서 Beatify Code 하면 원복이 됩니다.
'이전자료 > 웹개발' 카테고리의 다른 글
| SQL 튜닝 및 사례 연구 (SQL 튜닝, 인덱스 튜닝) (0) | 2022.01.18 |
|---|---|
| SQL 튜닝 및 사례 연구 (조인 튜닝) (0) | 2022.01.18 |
| node.js(express) .env로 DB정보 따로 관리하기 (0) | 2022.01.17 |
| 프로그래밍에서 논리란? (0) | 2022.01.17 |
| 비트 마스킹,비트연산으로 비트 가지고 놀기 이진수를 이용한 꼼수 (0) | 2022.01.17 |