优化

保持你的项目精干、快速响应和可维护性，这样你就可以提供最好的体验并专注于更重要的工作。

On this page

精简Sass导入

在您的资产管道中使用Sass时，请确保只导入所需的组件来优化bootstrap。您最大的优化可能来自于我们网站的布局和组件部分bootstrap.scss.

// 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";
@import "offcanvas";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

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

Lean 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';

这样，就不会包含任何不打算用于按钮、旋转木马和工具提示等组件的JavaScript。如果要导入下拉列表、工具提示或弹出窗口，请确保在列表中列出Popper依赖项package.json 文件。

Default Exports

Files in bootstrap/js/dist use the default export, so if you want to use one of them you have to do the following:

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

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

Autoprefixer .browserslistrc

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

未使用的CSS

本栏目需要帮助，请考虑开通PR。谢谢！

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

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

最小化和压缩

只要有可能，一定要压缩为访问者提供的所有代码。如果您使用的是Bootstrap dist文件，请尝试使用缩小的版本（由指示）。min.css 还有。min.js 扩展）。如果您使用自己的构建系统从源代码构建引导，请确保为HTML、CSS和JS实现自己的minifier。

非阻塞文件

虽然缩小和使用压缩看起来已经足够了，但让你的文件成为非阻塞文件也是让你的网站得到充分优化和足够快的一大步。

如果你在谷歌浏览器中使用一个灯塔插件，你可能在FCP上绊倒了。第一个Contentful Paint度量度量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。

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

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

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

始终使用HTTPS

您的网站应该只能在生产中通过HTTPS连接使用。HTTPS提高了所有站点的安全性、隐私性和可用性，并且没有非敏感的web流量。根据您的体系结构和web托管提供商的不同，将您的网站配置为仅通过HTTPS提供服务的步骤有很大的不同，因此超出了这些文档的范围。

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

返回顶部