js & css 로딩 속도 줄이기 -> 코드 축소하기

공감 및 댓글은 포스팅 하는데  아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께  도움이 되길 바라며 더 깔끔하고 좋은 포스팅을  만들어 나가겠습니다^^

js 와 css 는 웹 페이지 로딩속도를 지연시키는 대표적인 녀석들입니다.

이 녀석들을 조금만 관리해줘도 로딩속도가 현저히 향상되는데요.

방법은 여러가지가 있지만 몇 가지만 소개합니다.

1. VSCode의 minify 사용해서 코드 줄이기 or 무료 사이트이용.

부트스트랩의 CSS 나 JS 파일들을 보면

꼭 아래사전처럼 .css 와 .min.css 파일이 같이 있습니다.

그 이유는 단순히 min.css 가 코드 간 공백을 없애놓은 거 같지만

로딩속도에도 차이를 주기 때문입니다.

되도록이면 .min.css 를 사용하면 좋겠죠?

그렇다고 만들어 놓은 css 파일에서 공백을 없애겠다고 무한백스페이스를 할 순

없겠죠?

그래서 VSCode 의 minify 나 무료 변환사이트가 있는데요.

무료 변환 사이트

https://www.websiteplanet.com/ko/webtools/jscssminifier

위 페이지에 가시면 쉽게 .min.css 로 변환할 수 있습니다.

VSCode 에서는 Minify 를 설치하신 후 사용하면 됩니다.

예를 들어 material.js 파일을 .min.js로 만들고 싶다면

단순히 같은 디렉토리에 material.min.js 파일을 생성해주기만 하면 됩니다.

어렵지 않죠?

저는 라즈베리에 간단한 웹을 띄워놨었는데 css 와 js 관리를 안해서

로딩이 90초나 걸렸었는데요, 이렇게 변환한 후 2초로 단축되었습니다.

엄청나죠 ㅎㅎ 관리의 중요성 ㅋㅋㅋ

이상입니다. 감사합니다.