최적화

최고의 경험을 제공하고 더 중요한 작업에 집중할 수 있도록 프로젝트를 간결하고 응답성이 높으며 유지 관리가 용이하도록 유지하세요.

이 페이지에서

린 사스 수입품

자산 파이프라인에서 Sass를 사용할 때 @import필요한 구성 요소만 사용하여 Bootstrap을 최적화해야 합니다. Layout & Components가장 큰 최적화는 의 섹션 에서 나올 가능성이 큽니다 bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@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";

구성 요소를 사용하지 않는 경우 주석 처리하거나 완전히 삭제하십시오. 예를 들어 캐러셀을 사용하지 않는 경우 해당 가져오기를 제거하여 컴파일된 CSS에서 일부 파일 크기를 저장합니다. Sass 가져오기에는 파일을 생략하기가 더 어려울 수 있는 일부 종속성이 있음을 명심하십시오.

린 자바스크립트

Bootstrap의 JavaScript에는 기본 dist 파일( bootstrap.js및 bootstrap.min.js)의 모든 구성 요소와 번들 파일( bootstrap.bundle.js및 bootstrap.bundle.min.js)에 대한 기본 종속성(Popper)도 포함됩니다. Sass를 통해 사용자 정의하는 동안 관련 JavaScript를 제거해야 합니다.

예를 들어 Webpack 또는 Rollup과 같은 자체 JavaScript 번들러를 사용한다고 가정하면 사용하려는 JavaScript만 가져옵니다. 아래 예에서는 모달 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를 포함하지 않습니다. 드롭다운, 툴팁 또는 팝오버를 가져오는 경우 파일에 Popper 종속성을 나열해야 package.json합니다.

기본 내보내기

파일 은 기본 내보내기bootstrap/js/dist 를 사용 하므로 그 중 하나를 사용하려면 다음을 수행해야 합니다.

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

const modal = new Modal(document.getElementById('myModal'))

자동 접두사 .browserslistrc

부트스트랩은 특정 CSS 속성에 브라우저 접두사를 자동으로 추가하기 위해 Autoprefixer에 의존합니다. 접두사는 .browserslistrcBootstrap repo의 루트에 있는 파일에 의해 지정됩니다. 이 브라우저 목록을 사용자 정의하고 Sass를 다시 컴파일하면 해당 브라우저 또는 버전에 고유한 공급업체 접두사가 있는 경우 컴파일된 CSS에서 일부 CSS가 자동으로 제거됩니다.

미사용 CSS

이 섹션에 도움이 필요하면 PR을 여는 것을 고려하십시오. 감사!

Bootstrap과 함께 PurgeCSS 를 사용하기 위한 미리 빌드된 예제는 없지만 커뮤니티에서 작성한 몇 가지 유용한 기사와 연습이 있습니다. 다음은 몇 가지 옵션입니다.

마지막으로 사용되지 않는 CSS에 대한 이 CSS Tricks 기사는 PurgeCSS 및 기타 유사한 도구를 사용하는 방법을 보여줍니다.

축소 및 gzip

가능하면 방문자에게 제공하는 모든 코드를 압축해야 합니다. 부트스트랩 dist 파일을 사용하는 경우 축소된 버전( .min.css및 .min.js확장자로 표시됨)을 고수하십시오. 자체 빌드 시스템을 사용하여 소스에서 부트스트랩을 빌드하는 경우 HTML, CSS 및 JS에 대한 자체 축소기를 구현해야 합니다.

비차단 파일

압축을 최소화하고 사용하는 것으로 충분해 보일 수 있지만 파일을 비차단 파일로 만드는 것도 사이트를 최적화되고 충분히 빠르게 만드는 데 큰 단계입니다.

Google Chrome에서 Lighthouse 플러그인을 사용하는 경우 FCP를 우연히 발견했을 수 있습니다. 첫 번째 콘텐츠가 포함된 페인트 측정항목은 페이지가 로드되기 시작한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링될 때까지의 시간을 측정합니다.

중요하지 않은 JavaScript 또는 CSS를 연기하여 FCP를 개선할 수 있습니다. 그게 무슨 뜻이야? 간단히 말해서 페이지의 첫 번째 페인트에 표시할 필요가 없는 JavaScript 또는 스타일시트는 async또는 defer속성으로 표시해야 합니다.

이렇게 하면 덜 중요한 리소스가 나중에 로드되고 첫 번째 페인트가 차단되지 않습니다. 반면에 중요한 리소스는 인라인 스크립트나 스타일로 포함될 수 있습니다.

이에 대해 더 알고 싶다면 이미 이에 대한 훌륭한 기사가 많이 있습니다.

항상 HTTPS 사용

웹사이트는 프로덕션 환경에서 HTTPS 연결을 통해서만 사용할 수 있어야 합니다. HTTPS는 모든 사이트의 보안, 개인 정보 보호 및 가용성을 향상시키며 민감하지 않은 웹 트래픽은 없습니다 . HTTPS를 통해서만 제공되도록 웹사이트를 구성하는 단계는 아키텍처 및 웹 호스팅 공급자에 따라 크게 다르므로 이 문서의 범위를 벗어납니다.

HTTPS를 통해 제공되는 사이트는 HTTPS 연결을 통해 모든 스타일시트, 스크립트 및 기타 자산에도 액세스해야 합니다. 그렇지 않으면 사용자에게 혼합 활성 콘텐츠 를 보내게 되어 종속성을 변경하여 사이트가 손상될 수 있는 잠재적인 취약성을 초래할 수 있습니다. 이로 인해 보안 문제가 발생하고 사용자에게 브라우저 내 경고가 표시될 수 있습니다. CDN에서 부트스트랩을 가져오든 직접 제공하든 상관없이 HTTPS 연결을 통해서만 부트스트랩에 액세스해야 합니다.