優化

精簡Sass導入

在您的資產管道中使用Sass時，請確保只導入所需的組件來優化bootstrap。您最大的優化可能來自于我們網站的布局和組件部分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";

如果您不使用組件，請將其注釋掉或完全刪除。例如，如果您不使用carousel，請刪除該導入以在編譯的CSS中保存一些文件大小。請記住，Sass導入之間存在一些依賴關系，這可能會使忽略文件變得更加困難。

Lean JavaScript

Bootstrap的JavaScript包含主dist文件中的每個組件(bootstrap.js 以及bootstrap.min.js)，甚至我們的包文件的主要依賴項（Popper）(bootstrap.bundle.js 以及bootstrap.bundle.min.js). 當您通過Sass進行自定義時，一定要刪除相關的JavaScript。

例如，假設您正在使用自己的JavaScript捆綁包，比如Webpack或Rollup，那么您只需要導入您計劃使用的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 文件。

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

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

Autoprefixer .browserslistrc

Bootstrap依賴于Autoprefixer自動向某些CSS屬性添加瀏覽器前綴。前綴由我們的.browserslistrc文件指定，該文件位于Bootstrap repo的根目錄中。自定義瀏覽器列表并重新編譯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/

Lastly, this CSS Tricks article on unused CSS shows how to use PurgeCSS and other similar tools.

最小化和壓縮

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

非阻塞文件

雖然縮小和使用壓縮看起來已經足夠了，但讓你的文件成為非阻塞文件也是讓你的網站得到充分優化和足夠快的一大步。

如果你在谷歌瀏覽器中使用一個燈塔插件，你可能在FCP上絆倒了。第一個Contentful Paint度量度量從頁面開始加載到頁面內容的任何部分呈現在屏幕上的時間。

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

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

如果您想了解更多信息，已經有很多關于它的優秀文章：

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

始終使用HTTPS

您的網站應該只能在生產中通過HTTPS連接使用。HTTPS提高了所有站點的安全性、隱私性和可用性，并且沒有非敏感的web流量。根據您的體系結構和web托管提供商的不同，將您的網站配置為僅通過HTTPS提供服務的步驟有很大的不同，因此超出了這些文檔的范圍。

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