성능 최적화

Bootstrap의 커스터마이징 내에 있는 Optimize, 성능 최적화에 대해 살펴봅시다. 프로젝트 내의 SCSS, JavaScript 파일에 필요하다고 생각하는 컴포넌트만 @import하여 최적화할 수 있습니다.

해당 작업을 진행하며, 초기화 등의 여러 작업이 번거롭게 느껴지지만 웹사이트를 제작하면서 최적화된 성능을 위해 불편함을 감수하는 trade-off라고 할 수 있습니다.

출처: Bootstrap Custimoize-Optimize

1.1 SCSS

이전 시간에 색상 커스터마이징을 위해 진행했던 예시를 통해 함께 알아봅시다. 윗부분은 색상 커스터마이징을 위해 필요한 작업이며, 아래에 나와있는 Bootstrap 초기화 부분이 성능 최적화에 해당합니다.

현재는 @import "../node_modules/bootstrap/scss/bootstrap";로 코딩하여 Bootstrap 전체 파일을 초기화시켜주었지만, @import "../node_modules/bootstrap/scss/dropdown"; 과 같이 본인이 필요한 dropdown만 초기화를 시키는 것이 가능하다는 이야기입니다.

하지만, 성능 최적화 부분이 아직 Bootstrap에서 최신의 기능으로 불안정하기 때문에 SCSS 등의 스타일 작업에서는 전체 파일을 초기화시키는 것을 추천드립니다.

@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

@import "../node_modules/bootstrap/scss/bootstrap";

1.2 JavaScript

이번에는 JavaScript 파일이며, JavaScript의 경우 개별적으로 가져오는 것이 성능적으로 큰 차이를 볼 수 있기 때문에 성능 최적화를 추천합니다.

Before optimization

성능 최적화 전에는 아래와 같이 Bootstrap의 bundle 형태로 가져온 것을 확인할 수 있습니다.

import bootstrap from 'bootstrap/dist/js/bootstrap.bundle'

After optimization

대문자 D로 시작하는 Dropdown이라는 변수로 아래의 경로에 있는 dropdown에 관련된 코드만 내어주는 것을 받아서 사용할 수 있도록 합니다.

import Dropdown from 'bootstrap/js/dist/dropdown'

또한, 초기화를 시켜주기 위해 dropdown 컴포넌트에 있는 Via JavaScript라고 되어있는 아래의 코드를 가져옵니다. 둘째, 셋째 줄의 코드를 보면, map 메소드를 통해 dropdown의 모든 요소를 찾아 dropdownToggleEl를 생성자 함수로 반환하고 있습니다.

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {
  return new bootstrap.Dropdown(dropdownToggleEl)
})

이전에는 번들 형태로 받아왔기 때문에 위의 bootstrap.Dropdown(dropdownToggleEl) 코드가 적절하지만, 현재는 개별적으로 가져오므로 이 부분을 아래와 같이 변경하여 생성자 함수로 호출할 수 있게 만들어야합니다.

추가적으로 var를 const로 변경해주었으며, dropdownlist 변수를 사용하지 않는다면 아래와 같이 변수에 할당하는 부분을 삭제하셔도 좋습니다.

const dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))
dropdownElementList.map(function (dropdownToggleEl) {
  return new Dropdown(dropdownToggleEl)
})

1.3 popper.js

이후 개발자 서버를 열어 확인하면, 성공!이 되면 좋겠지만 아래와 같이 에러가 발생하게 됩니다.

그 이유는 dropdown의 팝업 기능은 Boostrap의 외부 패키지인 popper.js를 활용하고 있습니다. Bootstrap을 번들 형태로 받아왔을 때에는 popper.js를 포함하고 있기 때문에 문제가 없었지만, 개별적으로 가져오면서 문제가 발생하게 된 것입니다.

그러므로 popper.js를 의존성 모듈로 아래와 같이 설치를 하면 간단히 해결됩니다.

$ npm i @popperjs/core

1.4 추가 예시

추가적인 이해를 돕기 위해 이번에는 Bootstrap의 컴포넌트 중 하나인 Modal의 최적화를 진행해봅시다.

JavaScript

import Modal from 'bootstrap/js/dist/modal'

new Modal(document.querySelector('#exampleModal'), {
  backdrop: 'static'
})

위와 같이 modal 파일을 개별적으로 가져오고, Bootstrap 홈페이지의 Modal 컴포넌트의 Via JavaScript를 참고하여 아래처럼 초기화해주면 됩니다. 참고로 해당 예시는 backdrop 옵션을 추가하여 모달 창 밖의 다른 곳을 클릭해도 모달 창이 꺼지지 않도록 하도록 적용한 예시입니다.