Twitter Bootstrap：花費很長時間編譯

我正在使用Twitter Bootstrap編寫一個簡單的應用程序。在我的主要HTML文件中，我有以下幾行：Twitter Bootstrap：花費很長時間編譯

<link rel="stylesheet/less" href="/static/less/style.less"> 
<script src="/static/js/libs/less-1.3.0.min.js"></script>

所以每次刷新頁面時，整個CSS都會生成。這每次需要大約15秒，因此等待頁面加載會很痛苦。

我試過使用SimpLESS生成較少文件的css，但生成失敗。我會盡力讓這個工作，但我也想知道我是不是做錯了什麼...

我不喜歡的事實，即每次生成的CSS，即使我不改變較少的文件。有沒有辦法讓緩存的CSS不知何故？或者還有其他解決方案可以解決這個問題嗎？

來源

2012-09-01 machinery

我會建議刪除你的.less文件的一部分，以查看是否有任何特定的東西導致性能不佳。它不應該那麼慢。我的猜測是一個特定的mixin或函數導致了這個問題。

我也建議分析JavaScript（Chrome有一個很好的JS分析器），看是否有任何明顯的問題出現，比如LESS相關的函數很慢並且需要重複調用。

這是我的整體LESS戰略，這可能對您未來有所幫助。我使用的是Visual Studio和ASP.Net，但是你可以在多種環境中執行此操作。

最重要的是，沒有適用於LESS的JavaScript。一切都在服務器端完成。
在開發過程中，我通過dotLess HTTP處理程序請求我的.less文件，它處理它們並處理緩存。時不時地，緩存故障，我不得不重新啓動我的本地Web服務器，但這不是什麼大不了的事情。這使我可以通過刷新頁面來減少實時更改並查看它們。它也很快。

例子：<link rel="stylesheet" href="foo.less" />

對於生產，我使用一個構建行動編譯我.LESS文件合併爲一個CSS文件，並在頁面直接引用CSS文件。這將一切動態都排除在等式之外。

例子：<link rel="stylesheet" href="final.css" />

來源

2012-09-01 15:02:52

謝謝，這是很好的建議。我正在使用django ...我想你的方法相當於讓SimpLESS工作，這將使我擁有服務器上的所有代。 – machinery

服務器代是最好的，但我很想知道爲什麼JS版本太慢了。 –

嗯..我也很驚訝。我只是下載了一個intializr生成的Bootstrap版本，並沒有真正改變更少的文件...所以這是一個乾淨的開箱即用版本。 – machinery

你需要每一個部分從引導？因爲那很多臃腫的代碼。

嘗試從主引導文件中禁用某些部分：

你需要的所有JavaScript的部分CSS？

你需要'代碼'&'表'嗎？

在「響應式實用程序」中，如果您不需要它，您可以評論很多。

讓我告訴你我的設置，它在SASS，但原則保持不變：

// Compass utilities 
@import "compass"; 

// Core variables and mixins 
@import "includes/variables"; 
@import "includes/mixins"; 

// Reset 
@import "includes/normalize"; 
@import "bootstrap/print"; 

// Core CSS 
@import "includes/scaffolding"; 
@import "includes/type"; 
//@import "bootstrap/code"; 
@import "includes/grid"; 
//@import "bootstrap/tables"; 
@import "includes/forms"; 
@import "includes/buttons"; 

// Components: common 
@import "includes/component-animations"; 
@import "bootstrap/glyphicons"; 
//@import "includes/dropdowns"; 
@import "includes/button-groups"; 
//@import "bootstrap/input-groups"; 
//@import "bootstrap/navs"; 
//@import "includes/navbar"; 
//@import "bootstrap/breadcrumbs"; 
//@import "bootstrap/pagination"; 
//@import "bootstrap/pager"; 
//@import "bootstrap/labels"; 
//@import "bootstrap/badges"; 
//@import "bootstrap/jumbotron"; 
//@import "bootstrap/thumbnails"; 
//@import "bootstrap/progress-bars"; 
//@import "bootstrap/media"; 
//@import "bootstrap/list-group"; 
//@import "bootstrap/panels"; 
//@import "bootstrap/wells"; 
@import "includes/close"; 

// Components w/ javascript 
@import "includes/alerts"; 
@import "bootstrap/modals"; 
//@import "bootstrap/tooltip"; 
@import "includes/popovers"; 
//@import "includes/carousel"; 

// Utility classes 
@import "bootstrap/utilities"; // Has to be last to override when necessary 
@import "bootstrap/responsive-utilities"; 

//custom styling 
@import "includes/customstyles";

來源

2013-11-19 23:49:53 Mark

Twitter Bootstrap：花費很長時間編譯

回答

相關問題