优化

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

精益 Sass 导入

🌐 Lean Sass imports

在你的资源管道中使用 Sass 时，确保通过只 @import 你需要的组件来优化 Bootstrap。你最大的优化可能来自我们 bootstrap.scss 的 Layout & Components 部分。

🌐 When using Sass in your asset pipeline, make sure you optimize Bootstrap by only @importing the components you need. Your largest optimizations will likely come from the Layout & Components section of our bootstrap.scss.

scss/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 导入之间存在一些依赖，这可能会使省略某个文件变得更加困难。

🌐 If you’re not using a component, comment it out or delete it entirely. For example, if you’re not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file.

精益 JavaScript

🌐 Lean JavaScript

Bootstrap 的 JavaScript 在我们的主要分发文件（bootstrap.js 和 bootstrap.min.js）中包含了每个组件，甚至在我们的打包文件（bootstrap.bundle.js 和 bootstrap.bundle.min.js）中也包含了我们的主要依赖（Popper）。在通过 Sass 自定义时，务必移除相关的 JavaScript。

🌐 Bootstrap’s JavaScript includes every component in our primary dist files (bootstrap.js and bootstrap.min.js), and even our primary dependency (Popper) with our bundle files (bootstrap.bundle.js and bootstrap.bundle.min.js). While you’re customizing via Sass, be sure to remove related JavaScript.

例如，假设你正在使用自己的 JavaScript 打包工具，如 Webpack、Parcel 或 Vite，你只会导入打算使用的 JavaScript。在下面的示例中，我们展示了如何只包含我们的模态 JavaScript：

🌐 For instance, assuming you’re using your own JavaScript bundler like Webpack, Parcel, or Vite, you’d only import the JavaScript you plan on using. In the example below, we show how to just include our modal 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 依赖。

🌐 This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips. If you’re importing dropdowns, tooltips or popovers, be sure to list the Popper dependency in your package.json file.

注意！ bootstrap/js/dist 中的文件使用 默认导出。要使用它们，请执行以下操作：

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

自动前缀.browserslistrc

🌐 Autoprefixer .browserslistrc

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

🌐 Bootstrap depends on Autoprefixer to automatically add browser prefixes to certain CSS properties. Prefixes are dictated by our .browserslistrc file, found in the root of the Bootstrap repo. Customizing this list of browsers and recompiling the Sass will automatically remove some CSS from your compiled CSS, if there are vendor prefixes unique to that browser or version.

未使用的 CSS

🌐 Unused CSS

需要此部分的帮助，请考虑提交一个 PR。谢谢！

🌐 Help wanted with this section, please consider opening a PR. Thanks!

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

🌐 While we don’t have a prebuilt example for using PurgeCSS with Bootstrap, there are some helpful articles and walkthroughs that the community has written. Here are some options:

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

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

缩小和 gzip

🌐 Minify and gzip

尽可能的话，务必压缩向访客提供的所有代码。如果你使用的是 Bootstrap 的 dist 文件，尽量使用压缩版本（由 .min.css 和 .min.js 扩展名表示）。如果你使用自己的构建系统从源代码构建 Bootstrap，请务必为 HTML、CSS 和 JS 实现自己的压缩工具。

🌐 Whenever possible, be sure to compress all the code you serve to your visitors. If you’re using Bootstrap dist files, try to stick to the minified versions (indicated by the .min.css and .min.js extensions). If you’re building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS.

非阻塞文件

🌐 Non-blocking files

虽然缩小和使用压缩似乎已经足够了，但使你的文件成为非阻塞文件也是使你的网站得到良好优化和足够快的一大进步。

🌐 While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.

如果你在 Google Chrome 中使用 Lighthouse 插件，你可能遇到过 FCP。首次内容绘制指标衡量的是从页面开始加载到页面的任何部分内容在屏幕上渲染所经过的时间。

🌐 If you are using a Lighthouse plugin in Google Chrome, you may have stumbled over FCP. The First Contentful Paint metric measures the time from when the page starts loading to when any part of the page’s content is rendered on the screen.

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

🌐 You can improve FCP by deferring non-critical JavaScript or CSS. What does that mean? Simply, JavaScript or stylesheets that don’t need to be present on the first paint of your page should be marked with async or defer attributes.

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

🌐 This ensures that the less important resources are loaded later and not blocking the first paint. On the other hand, critical resources can be included as inline scripts or styles.

如果你想了解更多相关信息，已经有很多关于它的精彩文章：

🌐 If you want to learn more about this, there are already a lot of great articles about it:

始终使用 HTTPS

🌐 Always use HTTPS

在生产环境中，你的网站应仅通过 HTTPS 连接访问。HTTPS 提高了所有网站的安全性、隐私性和可用性，不存在非敏感的网络流量。将你的网站配置为仅通过 HTTPS 提供服务的步骤因你的架构和网络托管提供商而异，因此超出了本文档的范围。

🌐 Your website should only be available over HTTPS connections in production. HTTPS improves the security, privacy, and availability of all sites, and there is no such thing as non-sensitive web traffic. The steps to configure your website to be served exclusively over HTTPS vary widely depending on your architecture and web hosting provider, and thus are beyond the scope of these docs.

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

🌐 Sites served over HTTPS should also access all stylesheets, scripts, and other assets over HTTPS connections. Otherwise, you’ll be sending users mixed active content, leading to potential vulnerabilities where a site can be compromised by altering a dependency. This can lead to security issues and in-browser warnings displayed to users. Whether you’re getting Bootstrap from a CDN or serving it yourself, ensure that you only access it over HTTPS connections.