비주얼 스튜디오 코드 VSC, 코드 경량화 minify

---

이 포스팅은 PC로 작성되었습니다.

모바일로 보시는 분들에게는 가끔

줄 바꿈이 어색하게 보일 수 있습니다.

 

---

 

 

 

CSS 코드 경량화 minify

웹사이트를 만들 때 코드 경량화 minify를 하는 것은 로딩 속도에 많은 도움을 줍니다.

코드 경량화란 무엇인지, 왜 하는 것인지에 대한 자세한 내용은 위의 포스트를 확인해주시기 바랍니다.

 

코드 경량화 minify는 어떻게 하는 것인지 검색을 해보면 대부분 코드 경량화를 해주는 웹사이트를 소개합니다.

그렇게 코드 경량화를 대신해주는 웹사이트들이 있는데, 여러모로 불편합니다.

일단 코드 경량화를 할 때마다 그 웹사이트를 들어가야 한다는 불편함이 있고, 그 웹사이트가 몇 년, 몇십 년이 지나도 영원할 거라는 보장도 없죠.

 

그래서 이번 포스트에서는 제가 사용하고 있는 코드 에디터인 비주얼 스튜디오 코드 Visual Studio Code를 이용해서 에디터에서 자체적으로 코드 경량화를 하는 방법을 알아보겠습니다.

 

 

 

 

Visual Studio Code로 minify 하기

 

비주얼 스튜디오 코드의 좌측을 보시면 이렇게 생긴 아이콘이 있습니다.

여기는 익스텐션스 Extensions라고, 비주얼 스튜디오 코드의 기본적인 기능들 이외에도 여러가지 기능들을 추가해서 말 그대로 확장(Extension)을 시켜주는 곳입니다.

 

 

 

클릭을 해서 들어가면 정말 무한한 여러가지 확장 기능들이 보이고, 검색창까지 있습니다.

코드 경량화를 할 것이기 때문에 minify 라고 검색해봅시다.

 

 

 

정말 여러가지 Extension이 나옵니다.

 

 

 

그중에서 저는 HTML, CSS, JavaScript.. 이 세 가지를 다 코드 경량화시켜주는 MinifyAll 이라는 녀석을 선택했습니다.

 

 

 

인스톨 Install을 클릭해서 설치해줍니다.

 

 

 

인스톨이 끝나면 코드 경량화가 잘되는지 실험을 해보기 위해서 공부했었던 소스 코드들 중에서 비교적 긴 코드를 불러와봅니다.

그리고 소스 코드를 전체 선택해줍니다.

비주얼 스튜디오 코드에서의 전체 드래그 단축키는 Ctrl+A 입니다.

 

 

 

그리고 그 위에서 마우스 오른쪽 클릭을 하면 minify와 관련된 메뉴들이 생겨나 있는 것을 보실 수 있습니다.

그중에서 Minify the selected text를 클릭하면 됩니다.

혹은 소스 코드를 전체 선택을 할 필요도 없이 바로 마우스 오른쪽 클릭을 해서 Minify this document를 클릭해도 됩니다.

물론 단축키가 가장 빠르겠죠?

 

 

 

성공입니다. ^^ 코드가 경량화되었습니다.

 

 

 

비주얼 스튜디오 코드 VSC 자동 줄바꿈

혹시라도 경량화가 된 코드가 위의 이미지처럼 자동 줄바꿈이 된 채로 보이지 않고,

한 줄로 길게 쭉 이어지면서 아래에 스크롤바가 생기시는 분들은 이 포스트를 확인해주시기 바랍니다.

 

 

 

minify를 한 결과, 5KB의 파일이 3KB가 되었습니다.

훨씬 더 큰 용량의 파일이었다면 더욱더 극적인 효과를 볼 수 있었을 겁니다.

 

 

 

---

이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서
빨간 하트♥로 만들어주세요.
지인에게 보여주고 싶은 글이었다면
공감 버튼 옆을 클릭해서 SNS에 공유해주세요.
댓글은 블로그 운영에 큰 힘이 됩니다.

 

---