最佳化（Optimize）

保持您的專案精簡、響應式且易於維護，讓您能夠提供最佳體驗並專注於更重要的工作。

本頁內容

精簡 Sass 引入（Lean Sass imports）

在您的資源管道中使用 Sass 時，請確保透過只 @import 您需要的元件來最佳化 Bootstrap。您最大的最佳化可能來自 bootstrap.scss 的 Layout & Components 區段。

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

如果您沒有使用某個元件，請將其註解掉或完全刪除。例如，如果您沒有使用輪播，請移除該引入以節省編譯後 CSS 的檔案大小。請記住，Sass 引入之間存在一些相依性，可能會使省略檔案變得更加困難。

精簡 JavaScript（Lean JavaScript）

Bootstrap 的 JavaScript 在我們的主要 dist 檔案（bootstrap.js 和 bootstrap.min.js）中包含每個元件，甚至在我們的 bundle 檔案（bootstrap.bundle.js 和 bootstrap.bundle.min.js）中包含我們的主要相依性（Popper）。當您透過 Sass 進行自訂時，請確保移除相關的 JavaScript。

例如，假設您使用自己的 JavaScript 打包工具如 Webpack、Parcel 或 Vite，您只需引入您計劃使用的 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 中的檔案使用預設匯出。要使用它們，請執行以下操作：

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

Autoprefixer .browserslistrc

Bootstrap 依賴 Autoprefixer 自動為某些 CSS 屬性新增瀏覽器前綴。前綴由我們的 .browserslistrc 檔案決定，該檔案位於 Bootstrap 儲存庫的根目錄。自訂此瀏覽器列表並重新編譯 Sass 將自動從您編譯後的 CSS 中移除某些 CSS，如果該瀏覽器或版本有獨特的供應商前綴。

未使用的 CSS（Unused CSS）

此區段需要幫助，請考慮開啟 PR。謝謝！

雖然我們沒有使用 PurgeCSS 搭配 Bootstrap 的預建範例，但社群已經撰寫了一些有用的文章和教學。以下是一些選項：

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

壓縮和 gzip（Minify and gzip）

盡可能確保壓縮您提供給訪客的所有程式碼。如果您使用 Bootstrap dist 檔案，請嘗試使用壓縮版本（以 .min.css 和 .min.js 副檔名標示）。如果您使用自己的建構系統從原始碼建構 Bootstrap，請確保為 HTML、CSS 和 JS 實作您自己的壓縮器。

非阻塞檔案（Non-blocking files）

雖然壓縮和使用 gzip 可能看起來足夠了，但讓您的檔案成為非阻塞的也是讓您的網站優化良好且足夠快速的重要一步。

如果您在 Google Chrome 中使用 Lighthouse 外掛，您可能遇到過 FCP。首次內容繪製指標測量從頁面開始載入到頁面內容的任何部分呈現在螢幕上的時間。

您可以透過延遲非關鍵的 JavaScript 或 CSS 來改善 FCP。這是什麼意思？簡單來說，不需要在頁面首次繪製時出現的 JavaScript 或樣式表應該標記 async 或 defer 屬性。

這確保較不重要的資源稍後載入，不會阻塞首次繪製。另一方面，關鍵資源可以作為內嵌腳本或樣式引入。

如果您想了解更多，已經有很多關於這方面的精彩文章：

始終使用 HTTPS（Always use HTTPS）

您的網站在生產環境中應該只能透過 HTTPS 連線存取。HTTPS 提升了所有網站的安全性、隱私性和可用性，而且不存在非敏感的網路流量。設定您的網站專門透過 HTTPS 提供服務的步驟因您的架構和網路託管供應商而異，因此超出了這些文件的範圍。

透過 HTTPS 提供的網站也應該透過 HTTPS 連線存取所有樣式表、腳本和其他資源。否則，您將向使用者發送混合主動內容，導致潛在的漏洞，網站可能因更改相依性而被入侵。這可能導致安全問題和向使用者顯示瀏覽器警告。無論您是從 CDN 取得 Bootstrap 還是自己提供它，請確保只透過 HTTPS 連線存取它。