在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組件中單獨加載

回答

相關問題