优化

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

本页目录

精简 Sass 导入

在资产管道中使用 Sass 时，确保通过仅 @import获取所需的组件。你最大的优化可能来自于 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 包含我们主要发行文件中的每个组件（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'))

Autoprefixer .browserslistrc

Bootstrap 依赖 Autoprefixer 自动为某些 CSS 属性添加浏览器前缀。前缀由我们位于 Bootstrap 仓库根目录的 .browserslistrc 文件决定。自定义此浏览器列表并重新编译 Sass，将会自动从编译后的 CSS 中移除某些 CSS，如果这些 CSS 的前缀是该浏览器或版本特有的。

未使用的 CSS

此部分需要帮助，请考虑提交一个拉取请求。谢谢！

虽然我们没有针对使用 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 的 CSS Tricks 文章展示了如何使用 PurgeCSS 及其他类似工具。

压缩和 gzip

尽可能地确保压缩你提供给访问者的所有代码。如果你使用的是 Bootstrap 的分发文件，尽量使用压缩版本（由 .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 还是自己提供，都要确保仅通过 HTTPS 连接访问它。