最佳化

精簡 Sass 匯入

在資產管線中使用 Sass 時，請務必透過僅匯入需要的組件來最佳化 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

Bootstrap 的 JavaScript 包含我們主要 dist 檔案（bootstrap.js 和 bootstrap.min.js）中的每個元件，甚至包含我們的主要依賴項（Popper）和我們的套件檔案（bootstrap.bundle.js 和 bootstrap.bundle.min.js）。當您透過 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 依賴項。

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

請協助撰寫此區段，請考慮開啟 PR。謝謝！

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

• 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 Tricks 文章說明未使用的 CSS，展示如何使用 PurgeCSS 和其他類似工具。

壓縮和 gzip

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

非封鎖檔案

雖然壓縮和使用壓縮看似已經足夠，但讓您的檔案成為非封鎖檔案也是讓您的網站最佳化且夠快的關鍵步驟。

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

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

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

如果您想進一步了解這方面，已經有許多很棒的文章

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

始終使用 HTTPS

您的網站應僅在生產環境中透過 HTTPS 連線提供。HTTPS 可改善所有網站的安全性、隱私權和可用性，而且 沒有所謂的非敏感網路流量。將您的網站設定為僅透過 HTTPS 提供服務的步驟會因您的架構和網路代管供應商而異，因此超出了這些文件範圍。

透過 HTTPS 提供服務的網站也應透過 HTTPS 連線存取所有樣式表、腳本和其他資源。否則，您將會向使用者傳送 混合主動內容，導致潛在漏洞，其中網站可能會因變更依賴項而受到危害。這可能會導致安全性問題和瀏覽器中顯示給使用者的警告。無論您是從 CDN 取得 Bootstrap 或自行提供服務，請確保僅透過 HTTPS 連線存取。