Question

我正在开发一个涉及许多开发人员的大型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在整个项目中进一步开发。

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

Answer 1

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

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

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

如果您不使用某些组件，那么需要减少CSS。我从不使用他们的导航栏（仅限两个级别），模态（没有图像，iframe等），以及其他东西，所以我不使用这些东西。我使用按钮，网格，面板和其他东西。我使用LESS和CodeKit。只是//注释掉你没有使用的组件并重新编译。在那里，你会看到减肥的最大收获。

如果您这样做，请使用bootstrap.less：

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

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

Answer 2

第一种方式更适合在生产中使用，当您开发网站时，第二个更好

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

Is there a good JavaScript minifier?

Answer 3

首先，不加载你不使用的东西永远是最好的选择。正如@cab一般所提到的，减少http（s）请求应该提供更快的加载。

Bootstrap具有模块化结构，背后的想法是你只需要加载（或编译）你需要的东西。编译自己的bootstrap副本相对容易。结果将是一个javascript文件和一个css，两者都包含您需要的组件。

Bootstrap的自定义程序（http://getbootstrap.com/customize/）将是编译您自己的副本的最简单方法，您可以选择所需的组件Javascript / CSS，并下载您的副本。

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

单独加载Bootstrap组件

3 个答案: