优化 · Bootstrap 6.0 中文文档

精简 Sass 设置

在资产管道中使用 Sass 时，确保通过仅 @use使用你需要的部分。你最大的优化可能来自于 Layout & Components 我们的一部分 bootstrap.scss.

@forward "banner";

// Configuration variables and maps, such as $utilities. Forwarding config makes
// them configurable from this entrypoint with `@use ... with (...)`. Emits no CSS.
@forward "config";

@forward "colors";

// Theme color maps ($theme-colors, $theme-bgs, etc.). Forwarding makes them
// configurable from this entrypoint with `@use ... with (...)`. Emits no CSS.
@forward "theme";

// Global CSS variables, layer definitions, and configuration
@forward "root";

// Subdir imports
@forward "content";
@forward "layout";
@forward "forms";
@forward "buttons";

// Components
@forward "accordion";
@forward "alert";
@forward "avatar";
@forward "badge";
@forward "breadcrumb";
@forward "chip";
@forward "card";
@forward "carousel";
@forward "datepicker";
@forward "dialog";
@forward "menu";
@forward "list-group";
@forward "nav";
@forward "nav-overflow";
@forward "navbar";
@forward "drawer";
@forward "pagination";
@forward "placeholder";
@forward "popover";
@forward "progress";
@forward "spinner";
@forward "stepper";
@forward "toasts";
@forward "tooltip";
@forward "transitions";

// Helpers
@forward "helpers";

// Utilities
@forward "utilities/api";

如果你没有使用某个组件，请将其注释掉或完全删除其@forward条目。例如，如果你没有使用轮播组件，删除该行可以在编译后的 CSS 中节省文件大小。请记住，Sass 部分文件之间存在一些依赖关系，这可能会使省略某个文件变得更加困难。

实现这一点最干净的方式是维护你自己的入口文件，仅转发你需要的 Bootstrap 部分，而不是导入所有的 bootstrap。将上面的导入堆栈复制到你自己的样式表中，然后注释掉你不使用的组件：

SCSS

          // custom-bootstrap.scss
@forward "bootstrap/scss/colors";
@forward "bootstrap/scss/root";

// Layout & content
@forward "bootstrap/scss/content";
@forward "bootstrap/scss/layout";
@forward "bootstrap/scss/forms";
@forward "bootstrap/scss/buttons";

// Components — keep only what you need
@forward "bootstrap/scss/alert";
@forward "bootstrap/scss/badge";
@forward "bootstrap/scss/card";
// @forward "bootstrap/scss/accordion";  // unused
// @forward "bootstrap/scss/carousel";   // unused
// @forward "bootstrap/scss/dialog";     // unused

// Helpers & utilities
@forward "bootstrap/scss/helpers";
@forward "bootstrap/scss/utilities/api";

然后编译你的 custom-bootstrap.scss，而不是 Bootstrap 默认的 bootstrap.scss。只要记得保留 colors 和 root（以及你剩余组件依赖的任何部分文件），因为框架的其余部分都是基于它们定义的变量和标记构建的。

精简 JavaScript

Bootstrap 的 JavaScript 在我们的主要分发文件（bootstrap.js 和 bootstrap.min.js）中包含了所有组件，甚至在我们的打包文件（bootstrap.bundle.js 和 bootstrap.bundle.min.js）中也包含了主要依赖项（Floating UI 和 Vanilla Calendar Pro）。在通过 Sass 自定义时，请务必删除相关的 JavaScript。

例如，假设你正在使用你自己的 JavaScript 打包工具，如 Webpack、Parcel 或 Vite，你只会导入你计划使用的 JavaScript。在下面的示例中，我们展示了如何只包含我们的对话框 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/dialog'
// import 'bootstrap/js/dist/menu'
// import 'bootstrap/js/dist/drawer'
// 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'

以这种方式导入文件会执行其副作用，从而注册该组件的数据属性 API——因此 data-bs-toggle 等功能可以在不增加额外代码的情况下继续工作。通过这种方式，你不会为像按钮、轮播和工具提示这样的组件包含任何你不打算使用的 JavaScript。如果你要导入菜单、工具提示或弹出框，请确保在你的 package.json 文件中列出 Floating UI 依赖。如果你使用日期选择器，也请确保列出 Vanilla Calendar Pro 依赖。

小心！ 文件在 bootstrap/js/dist 使用 默认导出. 要使用它们，请执行以下操作：

JavaScript

          import Dialog from 'bootstrap/js/dist/dialog'
const dialog = new Dialog(document.getElementById('myDialog'))

Autoprefixer .browserslistrc

Bootstrap依赖Autoprefixer自动为某些CSS属性添加浏览器前缀。前缀由我们的.browserslistrc文件控制，该文件位于Bootstrap仓库根目录以及npm包的根目录（node_modules/bootstrap/.browserslistrc）中。自定义此浏览器列表并重新编译Sass时，如果存在该浏览器或版本特有的供应商前缀，编译后的CSS中将自动移除一些CSS。

未使用的 CSS

PurgeCSS 分析你的标记并剔除任何未被使用的 CSS 选择器，这可以显著缩减 Bootstrap 的编译 CSS。下面的设置假设项目为静态 HTML 页面，并配有 Bootstrap 的 JavaScript。

首先，将 PurgeCSS 安装为开发依赖：

壳

          npm install --save-dev purgecss

然后在你的项目根目录添加一个 purgecss.config.js：

JavaScript

          // purgecss.config.js
export default {
  // Files to scan for the class names actually in use
  content: ['./**/*.html', './**/*.js'],
  // Your compiled Bootstrap CSS (plus any of your own)
  css: ['./css/bootstrap.css'],
  output: './css/bootstrap.purged.css',
  // Bootstrap 6 uses ":" in class names (e.g. `md:d-none`, `hover:opacity-50`),
  // so the extractor must keep colons and slashes.
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
  safelist: {
    // Classes added at runtime by Bootstrap's JS that never appear in your HTML
    standard: ['show', 'active', 'hiding', 'dialog-open'],
    // Keep component families that are generated or toggled dynamically
    greedy: [/^carousel/, /^menu/, /^drawer/, /^dialog/, /^tooltip/, /^popover/]
  }
}

在构建过程中运行它，并将 PurgeCSS 指向配置文件：

壳

          npx purgecss --config purgecss.config.js

然后提供bootstrap.purged.css而不是完整文件。

清理后请彻底测试。 Bootstrap 使用 JavaScript 切换许多类（.show、.active、.hiding 等）并动态生成其他类（轮播、菜单、对话框）。PurgeCSS 无法在扫描的文件中找到的任何内容都会被删除，因此请使用 safelist 选项来保护运行时类，并验证每个交互组件仍然正常工作。

对于更深入的演练，社区已经编写了一些有用的指南：

使用 PurgeCSS 删除 Bootstrap 中未使用的 CSS 样式
自动删除 Bootstrap 或其他框架中未使用的 CSS
CSS-Tricks：如何从网站中删除未使用的 CSS？

压缩和 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 连接访问它。