View on GitHub

優化 (Optimize)

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

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

// 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/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 的壓縮程序。

Nonblocking files

While minifying and using compression might seem like enough, making your files nonblocking ones is also a big step in making your site well-optimized and fast enough.

If you are using a Lighthouse plugin in Google Chrome, you may have stumbled over FCP. The First Contentful Paint metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.

You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don’t need to be present on the first paint of your page should be marked with async or defer attributes.

This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.

If you want to learn more about this, there are already a lot of great articles about it:

Always use HTTPS

Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and there is no such thing as non-sensitive web traffic. The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs.

Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users mixed active content, leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.