在 Bootstrap 组件中单独加载答案

【问题标题】：Separately loading in Bootstrap components在 Bootstrap 组件中单独加载
【发布时间】：2014-01-07 02:52:30
【问题描述】：

我正在处理一个涉及许多开发人员的大型 Web 项目，我想精简 Bootstrap3 包并仅保留我们正在使用的内容。基本上，这个想法是在页面加载到浏览器时减少任何额外的开销。

所以我有两种方法可以做到这一点：

我可以...

a.) 从库中删除任何额外的部分，创建一个新版本，然后将其加载到我们的项目中。

例如：

<!-- Custom build of a slimmed down Bootstrap -->
<script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>

或者……

b.) 将整个 Bootstrap3 模块化，将每个组件分离到自己的文件中，并将整个构建写入 html，同时注释掉我们不需要的东西。

例如：

<!-- All Bootstrap components-->
<script src="/bootstrap/3.0.3/js/glyphicons_bootstrap.min.js"></script>
<script src="/bootstrap/3.0.3/js/buttongroups.min.js"></script>
<script src="/bootstrap/3.0.3/js/inputgroups_bootstrap.min.js"></script>
<!-- <script src="/bootstrap/3.0.3/js/navs_bootstrap.min.js"></script> DON'T NEED THIS -->
<script src="/bootstrap/3.0.3/js/navbars_bootstrap.min.js"></script>
<!-- <script src="/bootstrap/3.0.3/js/breadcrumbs_bootstrap.min.js"></script> DON'T NEED THIS -->
<script src="/bootstrap/3.0.3/js/pagination_bootstrap.min.js"></script>

等等...

使用第二个选项的好处是，它可以让其他开发人员更好地控制我们正在加载到项目中的引导组件，而无需重新构建它。如果将来他们需要加载一些新的 Bootstrap 组件，他们可以取消注释该行代码。这将使其他开发人员使用起来更加灵活，并且不会限制他们在整个项目中使用 Bootstrap 进行进一步开发。

但是对此有什么想法？将更多文件拉入项目（而不是拉入一个大文件）会增加加载时的开销吗？这是否违反“良好/最佳实践”？

【问题讨论】：

使用引导程序的目的是从库中受益并获得更新。您将未来的所有工作都交给自己/您的团队...

标签： html performance twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

第一种方式更好用在生产环境中，当您开发您的网站时，第二个更好

您可以在下面找到一个很好的缩小工具列表，帮助您自动合并 js 文件。

Is there a good JavaScript minifier?

【讨论】：

【解决方案2】：

如果你去https://github.com/twbs/bootstrap/tree/master/js，所有的js都在js文件夹中分离出来。 dist 文件夹包含已编译的文件。

但是，一个文件是更少的http请求和更快的加载。 bootstrap.min.js 文件很小。此外，一旦它被浏览器缓存，您就无需担心加载。

文件更少，加载速度更快，因为 http 请求更少。就此而言，您可以为他们的 js 和他们的 respond.js 使用 Bootstrap 的 CDN。

如果您不使用某些组件，则需要精简 CSS。我从不使用他们的导航栏（只有两个级别）、模式（没有图像、iframe 等）和其他东西，所以我不使用这些东西。我使用按钮、网格、面板和其他东西。我使用 LESS 和 CodeKit。只需 // 注释掉您不使用的组件并重新编译。这就是你会看到瘦身的最大收获。

如果你这样做，在 bootstrap.less 中：

//@import "bootstrap/popovers.less";
//@import "bootstrap/component-animations.less";

那么所有生成的 CSS 都不会成为最终 bootstrap.css 文件的一部分

【讨论】：

只是注释掉组件并重新编译不会降低文件大小。你能解释一下你的意思吗？
如果您打开 bootstrap.less 文件并注释掉 // - 两个正斜杠是无声注释，它们不会被编译，并且生成的 CSS 的大小会受到很大影响。这是 less // 中的单行注释
这很有趣。如果我注释掉一行，它不会被编译，它会减小文件的大小。嗯...
啊，我明白了！这很有意义。
我没有写说 js 的大小无关紧要，我写的是缩小后的 bootstrap 真的很小 27k 并且一旦被缓存，就没有关系了，因为它被缓存了。即使我不使用 bootstrap 中的两三个东西，但与抓取单个文件并自己编译它们的时间相比，不加载模式和其他一些东西的 4k 差异确实没有多大好处。

【解决方案3】：

首先，不加载你不使用的东西总是最好的选择。正如@cab 所提到的，通常减少 http(s) 请求应该会加快加载速度。

Bootstrap 具有模块化结构，其背后的理念是您只需加载（或编译）您需要的内容。编译您自己的引导程序副本将相对容易。结果将是一个 javascript 文件和一个 css，都包含您需要的组件。

Bootstrap 的定制器 (http://getbootstrap.com/customize/) 将是编译您自己的副本的最简单方法，您可以选择您需要的组件 Javascript/CSS，然后下载您的副本。

第二个选项是从 github 下载源代码并编译它。我主要使用 grunt 来做这个 Bootstrap 是指 http://bower.io/ 来做这个。在编译之前注释掉你不需要的东西。对于 CSS，您可以在 less/bootstrap.less 中执行此操作，对于 Gruntfile.js 中的 javascript（大约第 73 行）。

【讨论】：