View on GitHub

優化 (Optimize)

保持項目的精簡、響應式與可維護性，以便您可提供最佳體驗以及專注在更重要的工作上。

六角學院的 Bootstrap 5 課程上線囉，立即與萬人一同學習最專業、最深入的 Bootstrap 5 課程。

On this page

匯入 Sass 樣式

在您的資產庫使用 Sass 時，請確保僅通過 @import 添加所需的物件來優化 Bootstrap。您最大的優化可能來自 bootstrap.scss 中的 Layout & Components 單元。

// 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";

如果您不使用元件，請將其註解或完全刪除。例如，若您不使用輪播，請刪除該 import 來節省一些編譯後的 CSS 文件大小。請記住，Sass imports 間存在一些依賴關係，這可能會使省去文件資料量更加困難。

使用 JavaScript

Bootstrap 的 JavaScript 包含我們主要的 dist 文件（ bootstrap.js 與 bootstrap.min.js ），甚至也包括我們的主要依賴項（Popper）以及綑綁文件（ bootstrap.bundle.js 與 bootstrap.bundle.min.js ）。透過 Sass 進行自定義時，請確保已刪除相關的 JavaScript。

例如，假設您正在使用自己的 JavaScript 綑綁程序，像是 Webpack 或 Rollup，則只需導入您計畫使用的 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，如 buttons、carousels 與 tooltips。如果要導入 dropdowns、tooltips 或 popovers，請確保在 package.json 文件中列出 Popper 的依賴項。

Default Exports

bootstrap/js/dist 的文件使用 default export，因此若您想匯出他們其中一個，您需要如下操作：

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

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

Autoprefixer .browserslistrc

Bootstrap 依賴 Autoprefixer 來自動添加瀏覽器前綴詞到特定的 CSS 屬性。前綴詞取決於 Bootstrap 根目的 .browserslistrc 文件。如果該瀏覽器或版本具有自己的前綴詞，自定義瀏覽器列表或重新編譯 Sass 將自動從已編譯的 CSS 中刪除一些 CSS 。

未使用的 CSS

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

雖然我們沒有將 PurgeCSS 與 Bootstrap 結合使用的案例，但仍有一些公開文件是有用的文章以及演練。以下是一些選項：

最後，這篇 CSS Tricks article on unused CSS 介紹了如何使用 PurgeCSS 與其他相似的工具。

縮小與壓縮

只要有可能，請確保壓縮您提供給訪問者的所有程式碼。若您使用的是 Bootstrap dist 文件，請試著使用最小化版本（由 .min.css 與 .min.js 延伸展示）。若要使用自己的建構系統從原始碼建構 Bootstrap，請確保執行 HTML、CSS 與 JS 的壓縮程序。

Non-blocking files

雖然縮小和使用壓縮似乎已經足夠了，但使您的檔案 non-blocking 也是使您的網站得到充分優化和夠快的一大步。

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

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

這確保了較不重要的資源稍後加載並且不會阻塞第一次渲染。另一方面，關鍵資源可以作為 inline scripts 或 styles 包含在內。

如果你想了解更多，這裡已經有很多關於它的好文章：

始終使用 HTTPS

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

通過 HTTPS 提供服務的站點還應通過 HTTPS 連接訪問所有 stylesheets、scripts 和其他資料。否則，你將向使用者發送 mixed active content，從而導致潛在的漏洞，站點可能會通過更改依賴項而受到損害。這可能會導致向用戶顯示安全問題和瀏覽器內警告。無輪您是從 CDN 獲取 Bootstrap 還是自己提供它，請確保您僅通過 HTTPS 連接訪問它。