최적화

최적화 (Optimize)

프로젝트를 가볍고(lean), 반응적이며, 유지보수하기 쉽게 유지해서 최고의 경험을 제공하고 더 중요한 작업에 집중해 보아요.

출처: 문서

본문

가벼운 Sass 임포트 (Lean Sass imports)

에셋 파이프라인에서 Sass를 사용할 때, 필요한 컴포넌트만 @import 해서 Bootstrap을 최적화해야 해요. 가장 큰 최적화 효과는 아마 우리 bootstrap.scss의 Layout & Components 섹션에서 나올 거예요.

scss/bootstrap.scss

// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

사용하지 않는 컴포넌트가 있다면 주석 처리하거나 아예 삭제해요. 예를 들어 캐러셀(carousel)을 사용하지 않는다면 그 임포트를 제거해서 컴파일된 CSS의 파일 크기를 줄일 수 있어요. Sass 임포트 간에는 파일을 생략하기 어렵게 만드는 몇 가지 의존성이 있다는 점을 명심하세요.

가벼운 JavaScript (Lean JavaScript)

Bootstrap의 JavaScript는 기본 dist 파일(bootstrap.js와 bootstrap.min.js)에 모든 컴포넌트를 포함하고, 번들 파일(bootstrap.bundle.js와 bootstrap.bundle.min.js)에는 핵심 의존성인 Popper까지 포함해요. Sass로 커스터마이즈하면서 관련 JavaScript도 함께 제거해야 해요.

예를 들어 Webpack, Parcel, Vite 같은 자신의 JavaScript 번들러를 사용한다면, 사용할 JavaScript만 임포트해야 해요. 아래 예시는 modal JavaScript만 포함하는 방법을 보여 줘요:

// Import just what we need

// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/offcanvas';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

이렇게 하면 버튼, 캐러셀, 툴팁 같은 컴포넌트에 사용하지 않을 JavaScript는 포함하지 않게 돼요. 드롭다운, 툴팁, 팝오버를 임포트한다면 package.json 파일에 Popper 의존성을 명시해야 해요.

주의! bootstrap/js/dist의 파일들은 기본 내보내기(default export)를 사용해요. 이를 사용하려면 다음과 같이 하세요:

import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))

Autoprefixer .browserslistrc

Bootstrap은 특정 CSS 프로퍼티에 브라우저 접두사를 자동으로 추가하기 위해 Autoprefixer에 의존해요. 접두사는 Bootstrap 저장소의 루트에 있는 .browserslistrc 파일로 결정돼요. 이 브라우저 목록을 커스터마이즈하고 Sass를 다시 컴파일하면, 해당 브라우저나 버전에 고유한 벤더 접두사가 있을 경우 컴파일된 CSS에서 일부가 자동으로 제거돼요.

미사용 CSS (Unused CSS)

이 섹션은 도움이 필요해요. PR을 열어 주시면 감사하겠어요!

PurgeCSS를 Bootstrap과 함께 사용하는 미리 빌드된 예시는 없지만, 커뮤니티에서 작성한 유용한 글과 워크스루가 몇 가지 있어요. 몇 가지 옵션은 다음과 같아요:

마지막으로, 미사용 CSS에 관한 이 CSS Tricks 글은 PurgeCSS와 비슷한 도구를 사용하는 방법을 보여 줘요.

Minify와 gzip

가능하면 방문자에게 서빙하는 모든 코드를 압축해야 해요. Bootstrap dist 파일을 사용한다면 minified 버전(.min.css와 .min.js 확장자)을 사용하는 게 좋아요. 소스에서 자체 빌드 시스템으로 Bootstrap을 빌드한다면 HTML, CSS, JS용 자체 minifier를 구현해야 해요.

논블로킹 파일 (Non-blocking files)

minify와 압축만으로 충분해 보일 수 있지만, 파일을 논블로킹(non-blocking)으로 만드는 것도 사이트를 잘 최적화하고 빠르게 만드는 큰 한 걸음이에요.

Google Chrome의 Lighthouse 플러그인을 사용한다면 FCP를 본 적이 있을 거예요. First Contentful Paint 지표는 페이지 로딩이 시작된 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정해요.

비핵심 JavaScript나 CSS를 지연(defer)시켜 FCP를 개선할 수 있어요. 무슨 뜻일까요? 간단히 말해 페이지의 첫 페인트에 필요하지 않은 JavaScript나 스타일시트에는 async 또는 defer 속성을 표시해야 한다는 뜻이에요.

이렇게 하면 덜 중요한 리소스가 나중에 로드되어 첫 페인트를 막지 않게 돼요. 반면 핵심 리소스는 인라인 스크립트나 스타일로 포함할 수 있어요.

이에 대해 더 알아보고 싶다면 이미 훌륭한 글이 많이 있어요:

항상 HTTPS 사용 (Always use HTTPS)

웹사이트는 운영(production)에서 HTTPS 연결로만 제공되어야 해요. HTTPS는 모든 사이트의 보안, 개인정보 보호, 가용성을 향상시키며, 민감하지 않은 웹 트래픽이라는 것은 존재하지 않아요. 웹사이트를 HTTPS로만 제공하도록 구성하는 단계는 아키텍처와 웹 호스팅 제공업체에 따라 크게 다르므로, 이 문서의 범위를 벗어나요.

HTTPS로 제공되는 사이트는 모든 스타일시트, 스크립트, 기타 에셋도 HTTPS 연결로 접근해야 해요. 그렇지 않으면 사용자에게 혼합 능동 콘텐츠(mixed active content)를 보내게 되어, 의존성을 변경해 사이트가 손상될 수 있는 잠재적인 취약점이 생겨요. 이는 보안 문제와 브라우저 내 경고를 사용자에게 표시하게 될 수 있어요. Bootstrap을 CDN에서 가져오든 직접 서빙하든 항상 HTTPS 연결로만 접근해야 해요.

더 알아보기 (Learn more)