Optimize 최적화

우리가 필요로 하는 기능만 @import를 통해 가지고 와 사용을 함으로써 최적화를 할 수 있습니다.

부트스트랩 초기화

단, 이렇게 가지고 오는 경우 초기화 과정을 거쳐야합니다.

이러한 과정이 작업이 번거롭게 느껴질 수 있지만, 웹사이트를 제작하면서 최적화된 성능을 위해 불편함을 감수하는 trade-off라고 할 수 있습니다.

1. SCSS

기존에 main.scss에 작성했던 전체가져오기 코드를 특정 스타일만 가져올 수 있도록 수정합니다.

//수정전
@import "../node_modules/bootstrap/scss/bootstrap";

//수정 후
@import "../node_modules/bootstrap/scss/dropdown"

하지만 수정하지 않고 전체를 가져와쓰는 것을 권장.

하지만, 성능 최적화 부분이 아직 Bootstrap5에서 최신의 기능으로 불안정하며,scss과 같은 스타일 파일의 경우 성능적으로 크게 좌지우지하지는 않을 것이기 때문에 스타일 작업에서는 전체 파일을 초기화시키는 것을 추천드립니다.

2. JavaScript

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

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

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

import bootstrap = 

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 변수를 사용하지 않는다면 아래와 같이 변수에 할당하는 부분을 삭제하셔도 좋습니다.

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

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

3. popper.js

하지만 기존의bootsstrap/dist/bootstrap.bundle의 경우 외부의 poper.js를 패키지로 묶어 사용을 했지만 지금은 개별로 사용하고 있기 떄문에 에러가 발생하게 됩니다.

따라서 popper.js를 의존성 모듈을 설치해줘야합니다.

$ npm i @popperjs/core