최적화
최고의 경험을 제공하고 더 중요한 작업에 집중할 수 있도록 프로젝트를 간결하고 응답성이 높으며 유지 관리가 용이하도록 유지하세요.
린 사스 수입품
자산 파이프라인에서 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";
// 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/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에 의존합니다. 접두사는 .browserslistrc
Bootstrap repo의 루트에 있는 파일에 의해 지정됩니다. 이 브라우저 목록을 사용자 정의하고 Sass를 다시 컴파일하면 해당 브라우저 또는 버전에 고유한 공급업체 접두사가 있는 경우 컴파일된 CSS에서 일부 CSS가 자동으로 제거됩니다.
미사용 CSS
이 섹션에 도움이 필요하면 PR을 여는 것을 고려하십시오. 감사!
Bootstrap과 함께 PurgeCSS 를 사용하기 위한 미리 빌드된 예제는 없지만 커뮤니티에서 작성한 몇 가지 유용한 기사와 연습이 있습니다. 다음은 몇 가지 옵션입니다.
- https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
- https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/
마지막으로 사용되지 않는 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 연결을 통해서만 부트스트랩에 액세스해야 합니다.