優(yōu)化
保持你的項目精干、快速響應(yīng)和可維護性，這樣你就可以提供最好的體驗并專注于更重要的工作。
精簡Sass導(dǎo)入
在您的資產(chǎn)管道中使用Sass時，請確保只導(dǎo)入所需的組件來優(yōu)化bootstrap。您最大的優(yōu)化可能來自于我們網(wǎng)站的布局和組件部分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，請刪除該導(dǎo)入以在編譯的CSS中保存一些文件大小。請記住，Sass導(dǎo)入之間存在一些依賴關(guān)系，這可能會使忽略文件變得更加困難。
Lean JavaScript
Bootstrap的JavaScript包含主dist文件中的每個組件(bootstrap.js 以及bootstrap.min.js)，甚至我們的包文件的主要依賴項（Popper）(bootstrap.bundle.js 以及bootstrap.bundle.min.js). 當(dāng)您通過Sass進行自定義時，一定要刪除相關(guān)的JavaScript。
例如，假設(shè)您正在使用自己的JavaScript捆綁包，比如Webpack或Rollup，那么您只需要導(dǎo)入您計劃使用的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';
這樣，就不會包含任何不打算用于按鈕、旋轉(zhuǎn)木馬和工具提示等組件的JavaScript。如果要導(dǎo)入下拉列表、工具提示或彈出窗口，請確保在列表中列出Popper依賴項package.json 文件。
Default Exports
Files in bootstrap/js/dist use the default export, so if you want to use one of
them you have to do the following:
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，如果該瀏覽器或版本有唯一的供應(yīng)商前綴。
未使用的CSS
本欄目需要幫助，請考慮開通PR。謝謝！
雖然我們沒有一個預(yù)先構(gòu)建的例子來使用PurgeCSS和Bootstrap，但是社區(qū)已經(jīng)編寫了一些有用的文章和演練。以下是一些選項：
- 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 擴展）。如果您使用自己的構(gòu)建系統(tǒng)從源代碼構(gòu)建引導(dǎo)，請確保為HTML、CSS和JS實現(xiàn)自己的minifier。
非阻塞文件
雖然縮小和使用壓縮看起來已經(jīng)足夠了，但讓你的文件成為非阻塞文件也是讓你的網(wǎng)站得到充分優(yōu)化和足夠快的一大步。
如果你在谷歌瀏覽器中使用一個燈塔插件，你可能在FCP上絆倒了。第一個Contentful Paint度量度量從頁面開始加載到頁面內(nèi)容的任何部分呈現(xiàn)在屏幕上的時間。
您可以通過推遲非關(guān)鍵JavaScript或CSS來改進FCP。那是什么意思？簡單地說，不需要出現(xiàn)在頁面第一次繪制中的JavaScript或樣式表應(yīng)該用async或defer屬性進行標(biāo)記
這樣可以確保不太重要的資源稍后加載，并且不會阻塞第一次繪制。另一方面，關(guān)鍵資源可以作為內(nèi)聯(lián)腳本或樣式包含。
如果您想了解更多信息，已經(jīng)有很多關(guān)于它的優(yōu)秀文章：
始終使用HTTPS
您的網(wǎng)站應(yīng)該只能在生產(chǎn)中通過HTTPS連接使用。HTTPS提高了所有站點的安全性、隱私性和可用性，并且沒有非敏感的web流量。根據(jù)您的體系結(jié)構(gòu)和web托管提供商的不同，將您的網(wǎng)站配置為僅通過HTTPS提供服務(wù)的步驟有很大的不同，因此超出了這些文檔的范圍。
通過HTTPS提供服務(wù)的站點還應(yīng)該通過HTTPS連接訪問所有樣式表、腳本和其他資產(chǎn)。否則，您將向用戶發(fā)送混合的活動內(nèi)容，從而導(dǎo)致潛在的漏洞，在這些漏洞中，站點可能會因更改依賴關(guān)系而受損。這可能會導(dǎo)致安全問題和向用戶顯示的瀏覽器內(nèi)警告。無論您是從CDN獲取引導(dǎo)還是自己提供引導(dǎo)，請確保您只能通過HTTPS連接訪問它。