优化

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

在本页面

精益 Sass导入

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

// Configuration
@import "functions";
@import "variables";
@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";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

如果您不使用组件，则将其注释掉或完全删除。例如，如果您不使用carousel，请删除该导入，以在编译后的CSS中减少文件大小。请记住，Sass导入之间存在一些依赖关系，这可能会使省略文件更加困难。

精益 JavaScript

Bootstrap的JavaScript包括我们主要dist文件（bootstrap.js 和 bootstrap.min.js）中的每个组件，甚至包括我们主要的依赖项（Popper）和捆绑文件（bootstrap.bundle.js 和 bootstrap.bundle.min.js）。通过Sass进行自定义时，请确保删除相关的JavaScript。

例如，假设您正在使用自己的JavaScript捆绑程序（如Webpack或Rollup），则只需导入计划使用的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/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

T这样，您就不会包括不打算用于按钮，轮播和工具提示等组件的任何JavaScript。如果要导入下拉菜单，工具提示或弹出窗口，请确保在package.json文件中列出Popper依赖项。

默认导出

bootstrap/js/dist 中的文件使用默认导出，因此如果要使用其中一个文件，必须执行以下操作：

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

自动前缀 .browserslistrc

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

未使用的CSS

本节需要帮助，请考虑打开PR。谢谢！

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

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

缩小并压缩

只要有可能，请确保压缩您提供给访问者的所有代码。如果您使用的是Bootstrap dist文件，请尝试使用最小化版本(.min.css and .min.js extensions)。如果要使用自己的构建系统从源代码构建Bootstrap，请确保为HTML、CSS和JS实现自己的minifier。

非阻塞文件

本节需要帮助，请考虑打开PR。谢谢！

一律使用https

本节需要帮助，请考虑打开PR。谢谢！