優化

讓您的項目保持精簡、響應迅速且可維護，這樣您就可以提供最佳體驗並專注於更重要的工作。

在本頁面

精益 Sass 導入

在您的資產管道中使用 Sass 時，請確保僅@import通過添加您需要的組件來優化 Bootstrap。您最大的優化可能來自Layout & Components我們的bootstrap.scss.

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

如果您不使用組件，請將其註釋掉或完全刪除。例如，如果您不使用輪播，請刪除該導入以在編譯的 CSS 中節省一些文件大小。請記住，跨 Sass 導入存在一些依賴關係，這可能會使省略文件變得更加困難。

精益 JavaScript

Bootstrap 的 JavaScript 包括我們的主要 dist 文件（bootstrap.js和bootstrap.min.js）中的每個組件，甚至我們的主要依賴項（Popper）和我們的捆綁文件（bootstrap.bundle.js和bootstrap.bundle.min.js）。當您通過 Sass 進行自定義時，請務必刪除相關的 JavaScript。

例如，假設您使用自己的 JavaScript 捆綁器，如 Webpack、Parcel 或 Vite，您只需導入您計劃使用的 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。如果您要導入下拉列表、工具提示或彈出框，請務必在package.json文件中列出 Popper 依賴項。

默認導出

bootstrap/js/dist使用默認導出的文件，因此如果您想使用其中一個，您必須執行以下操作：

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

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

自動前綴 .browserslistrc

Bootstrap 依賴 Autoprefixer 自動將瀏覽器前綴添加到某些 CSS 屬性。前綴由我們的.browserslistrc文件指定，該文件位於 Bootstrap 存儲庫的根目錄中。自定義此瀏覽器列表並重新編譯 Sass 將自動從編譯的 CSS 中刪除一些 CSS，如果該瀏覽器或版本存在唯一的供應商前綴。

未使用的 CSS

本節需要幫助，請考慮打開 PR。謝謝！

雖然我們沒有使用PurgeCSS和 Bootstrap 的預構建示例，但社區編寫了一些有用的文章和演練。以下是一些選項：

最後，這篇關於未使用 CSS 的 CSS 技巧文章展示瞭如何使用 PurgeCSS 和其他類似工具。

縮小和 gzip

只要有可能，請務必壓縮您提供給訪問者的所有代碼。如果您使用的是 Bootstrap dist 文件，請嘗試使用縮小版本（由.min.css和.min.js擴展名表示）。如果您使用自己的構建系統從源代碼構建 Bootstrap，請確保為 HTML、CSS 和 JS 實現自己的壓縮器。

非阻塞文件

雖然縮小和使用壓縮似乎就足夠了，但使您的文件成為非阻塞文件也是使您的網站得到充分優化和足夠快的一大步。

如果您在 Google Chrome 中使用Lighthouse插件，您可能會偶然發現 FCP。First Contentful Paint度量從頁面開始加載到頁面內容的任何部分呈現在屏幕上的時間。

您可以通過推遲非關鍵的 JavaScript 或 CSS 來改進 FCP。這意味著什麼？簡單地說，不需要在頁面的第一次繪製中出現的 JavaScript 或樣式表應該使用async或defer屬性進行標記。

這可以確保稍後加載不太重要的資源並且不會阻塞第一次繪製。另一方面，關鍵資源可以作為內聯腳本或樣式包含在內。

如果您想了解更多關於此的信息，已經有很多關於它的精彩文章：

始終使用 HTTPS

您的網站應該只能在生產環境中通過 HTTPS 連接訪問。HTTPS 提高了所有站點的安全性、隱私性和可用性，並且不存在非敏感網絡流量之類的東西。將您的網站配置為僅通過 HTTPS 提供服務的步驟因您的架構和網絡託管服務提供商而異，因此超出了這些文檔的範圍。

通過 HTTPS 提供服務的站點還應該通過 HTTPS 連接訪問所有樣式表、腳本和其他資產。否則，您將向用戶發送混合的活動內容，從而導致潛在的漏洞，通過更改依賴項可能會破壞站點。這可能會導致安全問題和向用戶顯示的瀏覽器內警告。無論您是從 CDN 獲取 Bootstrap 還是自己提供服務，請確保僅通過 HTTPS 連接訪問它。