Optimize
保持项目的精简性、响应性和可维护性,以便提供最佳体验并专注于更重要的工作。
精简 Sass导入
在你的asset pipeline中使用Sass时,请确保你只通过@import
你需要的组件来优化Bootstrap。 你最大的优化可能来自bootstrap.scss
的Layout & Components
部分。
// 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";
如果你没有使用组件,请将其注释掉或完全删除。 例如,如果你不使用carousel,请删除该导入以在编译的CSS中节省一些文件大小。 请记住,Sass导入之间存在一些依赖关系,这可能会使省略文件变得更加困难。
精简JavaScript
Bootstrap的JavaScript包括我们的主dist文件(bootstrap.js
和bootstrap.min.js
)中的每个组件,甚至包括我们与捆绑文件(bootstrap.bundle.js
和`bootstrap.bundle.min.js’)的主要依赖项(Popper)。 当你通过Sass进行自定义时,一定要删除相关的JavaScript。
例如,假设你使用自己的JavaScript bundler,如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';
这样,就不会包含任何不打算用于按钮、carousels和tooltips等组件的JavaScript。 如果要导入下拉菜单、工具提示或弹出窗口,请确保在“package.json”文件中列出Popper依赖项。
Heads up! bootstrap/js/dist
中的文件使用默认导出。要使用它们,请执行以下操作:
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的预构建示例,社区编写了一些有用的文章和演练。 以下是一些可用选择:
- 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 Tricks article on unused CSS显示了如何使用PurgeCSS和其他类似工具。
Minify和gzip
只要可能,一定要压缩你提供给访问者的所有代码。 如果你使用的是Bootstrap dist文件,请尝试使用缩小的版本(由.min.css
和.min.js
扩展名表示)。 如果你使用自己的构建系统从源代码构建Bootstrap,请确保为HTML、CSS和JS实现自己的迷你压缩。
非阻塞文件
虽然缩小和使用压缩似乎已经足够了,但使你的文件成为非阻塞文件也是使你的网站得到充分优化和足够快的一大步。
如果你正在使用Lighthouse插件,你可能已经开始纠结于FCP了。 The First Contentful Paint指标度量从页面开始加载到页面内容的任何部分呈现在屏幕上的时间。
你可以通过延迟非关键JavaScript或CSS来改进FCP。 这是什么意思? 简单地说,不需要出现在页面的第一幅画上的JavaScript或样式表应该标记为“async”或“defer”属性。
这样可以确保稍后加载不太重要的资源,而不会阻塞第一次绘制。 另一方面,关键资源可以作为内联脚本或样式包括在页面内。
如果你想了解更多关于它的信息,已经有很多很棒的文章了:
始终使用HTTPS
你的网站在生产中只能通过HTTPS连接使用。 HTTPS提高了所有网站的安全性、隐私性和可用性,而且不存在非敏感的网络流量。 将你的网站配置为仅通过HTTPS提供服务的步骤因你的架构和网络托管提供商而异,因此超出了这些文档的范围。
通过HTTPS提供服务的站点还应通过HTTPS连接访问所有样式表、脚本和其他资产。 否则,你将向用户发送混合活动内容,导致潜在的漏洞,其中网站可能会通过更改依赖关系而受到损害。 这可能会导致安全问题,并向用户显示浏览器中的警告。 无论你是从CDN获得引导还是自己提供引导,请确保你只能通过HTTPS连接访问它。