优化

保持您的项目精简、响应迅速且可维护，以便您可以提供最佳体验并专注于更重要的工作。

在此页

精简 Sass 导入

在您的资产管道中使用 Sass 时，请确保通过仅@import调用您需要的组件来优化 Bootstrap。您最大的优化可能来自Layout & Components我们的bootstrap.scss.

// 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。在下面的例子中，我们展示了如何只包含我们的模态 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 依赖项。

默认导出

bootstrap/js/dist使用默认导出的文件，所以如果你想使用其中一个，你必须执行以下操作：

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

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

自动前缀.browserslistrc

Bootstrap 依靠 Autoprefixer 自动为某些 CSS 属性添加浏览器前缀。前缀由我们的.browserslistrc文件决定，该文件位于 Bootstrap 存储库的根目录中。自定义此浏览器列表并重新编译 Sass 将自动从编译的 CSS 中删除一些 CSS，如果该浏览器或版本有唯一的供应商前缀。

未使用的 CSS

本节需要帮助，请考虑打开 PR。谢谢！

虽然我们没有将PurgeCSS与 Bootstrap 一起使用的预构建示例，但社区已经编写了一些有用的文章和演练。以下是一些选项：

最后，这篇关于未使用的 CSS 的 CSS 技巧文章展示了如何使用 PurgeCSS 和其他类似工具。

缩小和 gzip

只要有可能，请务必压缩您为访问者提供的所有代码。如果您使用的是 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 提高了所有站点的安全性、隐私性和可用性，并且不存在所谓的非敏感 Web 流量。将您的网站配置为仅通过 HTTPS 提供服务的步骤因您的体系结构和 Web 托管提供商而异，因此超出了这些文档的范围。

通过 HTTPS 服务的站点还应该通过 HTTPS 连接访问所有样式表、脚本和其他资产。否则，您将向用户发送混合的活动内容，从而导致潜在的漏洞，在这种情况下，站点可能会因更改依赖项而受到损害。这可能会导致安全问题和向用户显示浏览器内警告。无论您是从 CDN 获取 Bootstrap 还是自己提供服务，请确保您仅通过 HTTPS 连接访问它。