Bootstrap - 성능 최적화(트리 쉐이킹)

01.Bootstrap-성능 최적화

• Bootstrap의 커스터마이징 내에 있는 Optimize 성능 최적화에 대해 알아봅시다.
• 프로젝트 내의 SCSS, JavaScript 파일에 필요하다고 생각하는 컴포넌트만 @import하여 최적화할 수 있습니다.
• 해당 작업을 진행하며 초기화 등의 여러 작업이 번거롭게 느껴지지만 웹사이트를 제작하면서 최적화된 성능을 위해 불편함을 감수하는 trade-off라고 할 수 있습니다.

02.SCSS

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

@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";

• 현재는 @import "../node_modules/bootstrap/scss/bootstrap";로 코딩하여 Bootstrap 전체 파일을 초기화시켜주었지만 @import "../node_modules/bootstrap/scss/dropdown"; 과 같이 본인이 필요한 dropdown만 초기화를 시키는 것이 가능 합니다.
• 하지만 성능 최적화 부분이 아직 Bootstrap에서 최신의 기능으로 불안정하기 때문에 SCSS 등의 스타일 작업에서는 전체 파일을 초기화시키는 것을 추천드립니다.

03.JavaScript

• JavaScript의 경우 개별적으로 가져오는 것이 성능적으로 큰 차이를 볼 수 있기 때문에 SCSS와는 달리 성능 최적화를 추천합니다.

• Before optimization

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

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

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

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

• 초기화를 시켜주기 위해 dropdown 컴포넌트에 있는 Via JavaScript라고 되어있는 아래의 코드를 가져옵니다.

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

• 두번째 서번째 줄의 코드를 보면 map 메소드를 통해 dropdown의 모든 요소를 찾아 dropdownToggleEl를 생성자 함수로 반환하고 있습니다.

04.popper.js

• 이후 개발자 서버를 열어 확인하면 성공!이 되면 좋겠지만 아래와 같이 에러가 발생하게 됩니다.
  
• 그 이유는 dropdown의 팝업 기능은 Boostrap의 외부 패키지인 popper.js를 활용하고 있습니다.
• Bootstrap을 번들 형태로 받아왔을 때에는 popper.js를 포함하고 있기 때문에 문제가 없었지만 개별적으로 가져오면서 문제가 발생하게 된 것입니다.

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

$ npm i @popperjs/core

package.json 파일에서 popper.js 설치 확인

{
  "name": "bootstrap-test",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@popperjs/core": "^2.11.5",
    "bootstrap": "^5.1.3",
    "parcel-bundler": "^1.12.5"
  },
  "devDependencies": {
    "sass": "^1.50.0"
  }
}

• popper.js을 설치하면 package.json 파일에서 @popperjs/core": "^2.11.5"가 존재하면 성공적으로 설치 완료된 것 입니다.

05.추가 실습

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

main.js

import Dropdown from 'bootstrap/js/dist/dropdown';
import Modal from "bootstrap/js/dist/modal" // 추가 실습 - Modal

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

// 추가 실습 - Modal
new Modal(document.querySelector('#exampleModal'), {
  backdrop: 'static'
});

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