Bootstrap V5.3 : Optimize 优化建议中文翻译版

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

精益 Sass 进口

在资产管道中使用 Sass 时，请确保仅通过使用您需要的组件来优化 Bootstrap。您最大的优化可能来自我们的 .@importLayout & Componentsbootstrap.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 文件（和）中的每个组件，甚至包括我们的主要依赖项（Popper）和我们的捆绑文件（和）。当您通过 Sass 进行自定义时，请务必删除相关的 JavaScript。bootstrap.jsbootstrap.min.jsbootstrap.bundle.jsbootstrap.bundle.min.js

例如，假设你使用自己的 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。如果您要导入下拉菜单、工具提示或弹出框，请务必在文件中列出 Popper 依赖项。package.json

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

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

自动前缀器 .browserslistrc

Bootstrap 依赖于 Autoprefixer 自动将浏览器前缀添加到某些 CSS 属性。前缀由我们的文件决定，该文件位于 Bootstrap 存储库的根目录中。自定义此浏览器列表并重新编译 Sass 将自动从编译的 CSS 中删除一些 CSS，如果该浏览器或版本有唯一的供应商前缀。.browserslistrc

未使用的 CSS

需要有关此部分的帮助，请考虑打开 PR。谢谢！

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

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

缩小和 gzip

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

非阻塞文件

虽然缩小和使用压缩似乎就足够了，但使您的文件无阻塞也是使您的网站得到良好优化和足够快的一大步。

如果您在 Google Chrome 中使用 Lighthouse 插件，您可能偶然发现了 FCP。First Contentful Paint 指标衡量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。

您可以通过延迟非关键 JavaScript 或 CSS 来改进 FCP。那是什么意思？简单地说，不需要出现在页面的第一个绘制上的 JavaScript 或样式表应该用 or 属性标记。asyncdefer

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

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

始终使用 HTTPS

您的网站应该只能在生产中通过 HTTPS 连接使用。HTTPS 提高了所有站点的安全性、隐私性和可用性，并且不存在非敏感网络流量这样的东西。将网站配置为仅通过 HTTPS 提供服务的步骤因您的架构和网络托管服务提供商而异，因此超出了这些文档的范围。

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

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

Optimize 优化建议