Visual Studio Code에서 HTML, CSS, Javascript소스를 Minify하는 방법에 대해서 설명해 드리겠습니다.
그전에 앞서 Minify를 하는 이유를 간단히 알아보겠습니다.
Minify란?
웹 사이트나 웹 애플리케이션에서 사용되는 파일(예: HTML, CSS, JavaScript)의 크기를 줄이기 위한 과정을 말합니다. 이 과정은 파일에서 불필요한 공백, 줄 바꿈, 주석 등을 제거하여 파일의 크기를 줄이는 것입니다. 이렇게 함으로써 아래와 같으 효과를 얻을 수 있습니다.
Minify에 의한 이점
- 로딩 속도 향상: 파일이 작으면 더 빠르게 다운로드됩니다. 작은 파일을 다운로드할수록 페이지 로딩 시간이 더 빠르게 줄어들어 사용자 경험을 향상합니다. 또한, 빠른 로딩 속도는 검색 엔진 최적화(SEO)에도 도움이 됩니다.
- 데이터 사용량 절약: 작은 파일은 데이터 전송 시간을 단축시킵니다. 이는 웹 사이트의 대역폭을 절약하고, 이는 서버 비용을 줄이는 데 도움이 됩니다.
- 코드 난독화: Minify는 코드에서 공백, 줄 바꿈, 주석 등을 제거하게 되어 소스의 양이 줄면서, 분석하기가 어렵게 됩니다. 이로 인해 의도치 않게 소스가 유출됨으로 인한, 악성 유저가 쉽게 악의적인 목적을 달성하기 어렵게 함으로써 보안에 도움이 됩니다.
VSCode 확장팩 Minify 설치하기
먼저, VSCode를 실행합니다.
확장 프로그램인 "Minify"를 설치를 위해서 아래와 같이 확장프로그램을 클릭 후, "Minify"를 검색하여 설치(Install)를 합니다.
VSCode Minify 사용하기
이제 HTML, CSS 혹은 Javascript 소스를 Minify하는 과정을 소개해 드리겠습니다.
1. Minify를 진행할 소스(HTML, CSS, Javacript)파일을 Explorer창에서 선택합니다.
2. VSCode 프롬프트 창을 띄워서, "Minify"를 입력후 선택하여 진행시킵니다.
VSCode 프롬프트 창을 여는 단축키는 아래와 같습니다.
사용하는 시스템이 Windows인 경우:
- F1
- Ctrl + Shift + P
사용하는 시스템이 MAC인 경우:
- F1
- Command + Shift + P
3. Minify과정이 끝나고 나면 Explorer창에서 새로운 파일이 생성된 것을 확인 할 수 있습니다.
파일명은 기존 파일명에 ".min"확장자가 붙어서 파일이 생성됩니다.
압축이 아주 잘 되어서 소스가 한줄로 쭉 생성된 것을 확인 할 수 있습니다.
이상으로 VSCode Minify확장프로그램 설치에서 부터 실행하는 방법까지의 설명을 마치도록 하겠습니다.
감사합니다.
댓글