在Bootstrap组件中单独加载

我正在研究一个涉及许多开发人员的大型Web项目，并且我想减少Bootstrap3的一个包并只保留我们正在使用的内容。基本上，这个想法是在页面加载到浏览器中时减少额外的开销。在Bootstrap组件中单独加载

因此，有2种方式，我可以去这样做：

我既可以...

一）请从库中的任何多余的部分，创建一个新的版本，然后加载。进入我们的项目。

例如：

<!-- 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进一步开发。

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

来源

2013-12-18 shmuli

使用引导程序的目的是从库中受益并获得更新。你正在将未来的所有工作带到你自己/你的团队...... – DrCord

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

但是，一个文件少了http请求并且加载速度更快。 bootstrap.min.js文件很小。另外，一旦它被浏览器缓存，你不需要担心加载。

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

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

在bootstrap.less如果你这样做：

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

然后，所有产生的CSS不会是最后bootstrap.css文件

来源

2013-12-18 20:33:28 Christina

只是评论组件和重新编译不会减小文件大小。你能解释一下你的意思吗？ – shmuli

如果你打开bootstrap.less文件并注释掉// - 两个正斜杠是一个无声的注释，它们不会被编译，并且生成的CSS的大小会受到很大影响。这是一个较少的单行提交// – Christina

这很有趣。如果我注释掉一行，它不会被编译，并会减小文件的大小。嗯... – shmuli

第一种方式是更好地在生产中使用，当你发展你的网站

下面你可以找到的微小工具你，帮助你结合的js文件自动良好的名单二是更好的。

Is there a good JavaScript minifier?

来源

2013-12-18 20:30:21

的一部分，首先不加载你不要什么不要使用永远是最好的选择。正如@cab提到的一般，减少http（s）请求应该给予更快的加载。

Bootstrap有一个模块化结构，其背后的想法是你只需要加载（或编译）你所需要的东西。编译自己的bootstrap将是相对容易的。结果将是一个JavaScript文件和一个CSS，它们都包含您需要的组件。

引导程序的定制程序（http://getbootstrap.com/customize/）将是编译自己的副本的最简单方法，您可以选择需要的组件JavaScript/CSS，然后下载您的副本。

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

来源

2013-12-18 21:08:58

在Bootstrap组件中单独加载

回答

相关问题