优化

精简 Sass 导入

在资产管道中使用 Sass 时，请确保仅通过 @import 导入所需的组件来优化 Bootstrap。最大的优化可能来自 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）中包含每个组件，甚至在我们的捆绑文件（bootstrap.bundle.js 和 bootstrap.bundle.min.js）中包含我们的主要依赖项（Popper）。在通过 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 依赖项。

import Modal from 'bootstrap/js/dist/modal'
const modal = new Modal(document.getElementById('myModal'))

Autoprefixer .browserslistrc

Bootstrap 依赖 Autoprefixer 自动为某些 CSS 属性添加浏览器前缀。前缀由我们的 .browserslistrc 文件决定，该文件位于 Bootstrap 存储库的根目录中。自定义此浏览器列表并重新编译 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/

最后，这篇 CSS Tricks 文章介绍了未使用 CSS，展示了如何使用 PurgeCSS 和其他类似工具。

最小化和 gzip

尽可能确保压缩提供给访问者的所有代码。如果您正在使用 Bootstrap dist 文件，请尝试坚持使用最小化版本（由 .min.css 和 .min.js 扩展名表示）。如果您使用自己的构建系统从源代码构建 Bootstrap，请务必为 HTML、CSS 和 JS 实现自己的最小化程序。

非阻塞文件

虽然最小化和使用压缩可能看起来已经足够，但使您的文件成为非阻塞文件也是使您的网站得到充分优化并足够快速的重要一步。

如果您在 Google Chrome 中使用 Lighthouse 插件，您可能已经偶然发现了 FCP。 首次内容绘制 指标测量从页面开始加载到页面内容的任何部分在屏幕上呈现所需的时间。

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

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

如果您想了解更多相关信息，这里已经有很多相关文章

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

始终使用 HTTPS

您的网站在生产环境中应仅通过 HTTPS 连接提供。HTTPS 提高了所有网站的安全性、隐私性和可用性，并且 不存在非敏感网络流量。根据您的架构和网络托管提供商的不同，将您的网站配置为仅通过 HTTPS 提供服务的步骤差异很大，因此超出了这些文档的范围。

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