优化

精益 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.

// 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 包括我们的主要 dist 文件（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.

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

自动前缀.browserslistrc

¥Autoprefixer .browserslistrc

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

• 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 技巧文章 展示了如何使用 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 中使用 灯塔 插件，你可能会偶然发现 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://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources

• https://web.dev/articles/defer-non-critical-css

始终使用 HTTPS

¥Always use HTTPS

你的网站只能在生产环境中通过 HTTPS 连接访问。HTTPS 提高了所有站点的安全性、隐私性和可用性，以及 不存在非敏感网络流量。将你的网站配置为仅通过 HTTPS 提供服务的步骤因你的体系结构和 Web 托管提供商的不同而有很大差异，因此超出了这些文档的范围。

¥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.