优化

让您的项目保持精简、快速响应和可维护性，这样您就能提供最佳体验，并专注于更重要的工作。

On this page

精简 Sass 输入

在资产管道中使用 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";

如果不使用某个组件，可将其注释掉或完全删除。例如，如果你不使用轮播（carousels），可以删除该导入，以节省编译 CSS 的文件大小。请注意，Sass 导入之间存在一些依赖关系，这可能会增加省略文件的难度。

精简 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。在下面的示例中，我们展示了如何只包含模态 JavaScript：

// 只导入我们所需要的JS组件

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

这样，您就不会在按钮（buttons）、轮播(carousels)和工具提示（tooltips）等组件中加入任何您不打算使用的 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 属性添加浏览器前缀。前缀由 Bootstrap 软件包根目录中的 .browserslistrc 文件决定。自定义浏览器列表并重新编译 Sass 后，如果存在该浏览器或版本独有的供应商前缀，编译后的 CSS 将自动移除某些 CSS。

未使用的 CSS

本部分需要帮助，请考虑开启 PR。谢谢！

虽然我们没有使用 Bootstrap 的 PurgeCSS预建示例，但社区中还是有一些有用的文章和攻略。以下是一些选项：

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

最小化和压缩

只要有可能，一定要压缩您提供给访客的所有代码。如果您使用的是 Bootstrap dist 文件，请尽量使用最小化版本（由 .min.css 和 .min.js 扩展名表示）。如果您使用自己的构建系统从源代码构建 Bootstrap，请务必为 HTML、CSS 和 JS 实施自己的最小化程序。

非阻塞文件

对文件进行缩减和压缩似乎已经足够了，但让文件成为无阻塞文件也是使网站优化和速度足够快的重要一步。

如果您正在使用 Google Chrome 浏览器中的Lighthouse插件，您可能会偶然发现 FCP。First Contentful Paint指标衡量的是从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。

您可以通过延迟非关键的 JavaScript 或 CSS 来改善 FCP。这意味着什么？简单地说，不需要在页面首次绘制时出现的 JavaScript 或样式表应使用 “async ”或 “defer ”属性标记。

这样可以确保不那么重要的资源在稍后加载，而不会阻塞首次绘制。另一方面，关键资源可以作为内联脚本或样式包含在内。

如果您想了解更多这方面的信息，已经有很多相关的精彩文章：

始终采用 HTTPS

您的网站只能通过 HTTPS 连接运行。HTTPS 提高了所有网站的安全性、隐私性和可用性，而且不存在非敏感网络流量。配置网站完全通过 HTTPS 提供服务的步骤因网站架构和虚拟主机提供商的不同而有很大差异，因此超出了本文档的范围。

通过 HTTPS 提供服务的网站还应通过 HTTPS 连接访问所有样式表、脚本和其他资产。否则，您将向用户发送混合活动内容，从而导致潜在的漏洞，即通过更改依赖关系来破坏网站。这会导致安全问题，并在浏览器中向用户显示警告。无论您是从 CDN 获取 Bootstrap 还是自己提供 Bootstrap，都要确保只通过 HTTPS 连接访问 Bootstrap。