블로그 작업노트 34: 제이쿼리 프리 및 부트스트랩5 버전으로 업그레이드

June 19, 2025

이번에 좀 크게 작업을했다.

여러가지 방법으로 블로그를 최적화 하고 있었는데, 그중에 좀 컸던 문제가 패킹해둔 js, css 파일이 크다는 문제였다.

이 부분을 해결하기위해서 퍼지 css든 뭐든 했지만 고질적으로 공용 스크립트, 스타일 코드의 존재때문에 파일크기는 일정이상 작아지지 않았다.

이 과정중에 여러번 알아보니, 제일큰 문제는 jQuery 스크립트였다.

근데 그렇다고 이 제이쿼리를 제거할수가없는게 내가 사용하는 여러 스크립트는 제이쿼리를 의존성으로 사용하고있고 그 중 제일큰게 Bootstrap 4 였다.

블로그 작업노트 34: 제이쿼리 프리 및 부트스트랩5 버전으로 업그레이드

사실 현재 부트스트랩은 5버전까지 나왔는데 이 5버전은 제이쿼리 프리, 그러니까 순수 javascript 로만으로도 작동이 되게 설계가 되어있었다.

그래서 올리고 싶긴하면서도 이미 4 버전에 맞게 각종 코드를 짜놓은게 많고, 여기저기서 제이쿼리 방식으로 ajax 요청해둔게 많아서 지금까지 회피해왔던 문제이다.

다만 이제 이런 최적화 방법말고 다른 부분은 전부 한 케이스고 더이상 손댈게 이것밖에 남지않아서 이번기회에 한번 싹 뒤집어보기로 결정했다.

우선 제이쿼리를 패키지에서 없애고 부트스트랩을 5버전으로 올렸다.

이에 따라 4와 5의 다른 클래스 보정, 모달 스크립트 보정작업을 전체적으로 진행했다.

부트스트랩 5버전은 웹팩에서 좀 재미있는 기능이 있었는데, 필요한 모듈만 꺼내서 따로 쓰는게 가능했다.

import Modal from 'bootstrap/js/dist/modal';
import Dropdown from 'bootstrap/js/dist/dropdown';

try {
    window.bootstrap = {
        Modal,
        Dropdown
    };

    require('@justinribeiro/lite-youtube')
} catch (e) {}Copy

그래서 이런 방식으로 필요한 모듈인 모달과 드롭다운만 가져와서 사용하는 방식으로하니 js 파일이 획기적으로 최적화가 되었다.

스타일도 마찬가지로 필요한거만 임포트가 가능한데, 부트스트랩 스타일은 변수로 서로 의존적으로 제어하는게 너무많아서 일일히 관리하는건 좀 무리가 있지 않을까 싶다.

특히나 스타일쪽은 purgeCSS가 있으니 어느정도 필터링은 되고 말이다.

이렇게 최적화 작업을 하고 난 이후에 내 정적 컨텐츠 파일의 크기는 아래와 같이 줄어들었다.

현재

파일 구성이 달라져서 개별적으로 비교하면 좀 애매하지만 전체적으로 510KB -> 311KB 로 리소스양이 줄어들었다.

대략 200KB, 40% 정도의 용량 감소에 성공했다.

개별적인 변화를 보자면 vendor.js 파일이 많이 감소되었는데, 이부분은 필요한 스크립트만 빼다쓰는 방식과 더불어 제이쿼리가 아예 빠지다보니 그런 부분에서의 용량 최적화가 적용된 사례라고 생각한다.

휴대전화 지표

데스크탑 지표

뭐 거의 이정도면 한계가 아닐듯 싶다.

더이상 만지려면 이미지 최적화부터 이거저거 손대야하는데, 블로그 사이트는 그런것도 어느정도 한계가 있다보니... 이게 최선이지 않을까 싶다.

하나욕심이 있다면 작은화면용 이미지를 따로 저장해 선택적으로 보여주는 srcset 을 전체에 적용하는 경우인데...

사실 시도는 해봤다. 다만 파일관리가 좀 엄두가 안날뿐이었다.

그래도 다음 도전과제로는 나쁘지 않을듯 하다.

#블로그

0 개의 댓글