Twitter Bootstrap : 컴파일 시간이 오래 걸리지 않습니다.

Question

Twitter Bootstrap을 사용하여 간단한 앱을 작성하고 있습니다.

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

그래서 난이 페이지를 새로 고침 할 때마다, 전체 CSS가 생성됩니다 : 내 주요 HTML 파일에서 나는 다음과 같은 라인을 가지고있다. 매번 약 15 초가 걸리므로 페이지가로드 될 때까지 기다리는 데 어려움이 있습니다.

적은 파일에서 CSS를 생성하기 위해 SimpLESS를 사용했지만 생성에 실패했습니다. 나는 그것을 작동 시키려고 노력할 것이다. 그러나 나는 또한 내가 뭔가 잘못하고있는 것이 아닌지 궁금해한다. ...

나는 CSS가 매번 생성된다는 사실을 싫어한다. 적은 파일을 변경하십시오. 캐시를 적게하는 방법이 있나요? 또는이 문제에 대한 다른 대체 솔루션이 있습니까?

Answer 1

.less 파일의 일부를 제거하여 성능 저하를 일으키는 특정 것이 있는지 확인하는 것이 좋습니다. 그것은 그렇게 천천히해서는 안됩니다. 내 생각 엔 특정 mixin 또는 함수가 문제를 일으키는 것입니다.

천천히 반복적으로 호출되는 LESS 관련 기능처럼 명백한 것이 있는지 확인하기 위해 JavaScript (Chrome에는 멋진 JS 프로파일 러가 있음)를 프로파일 링하는 것이 좋습니다.

다음은 내게 도움이 될 수있는 전반적인 전략입니다. 저는 Visual Studio와 ASP.Net을 사용하고 있습니다 만, 다양한 환경에서이 작업을 수행 할 수 있습니다.

• 가장 중요하게는 덜 JavaScript입니다. 모든 것은 서버 측에서 수행됩니다.

• 개발 중에 나는 자신의 .less 파일을 처리하고 처리하는 dotLess HTTP 처리기를 통해 내 .less 파일을 요청합니다. 때때로 캐시가 고장 나고 로컬 웹 서버를 다시 시작해야하지만 큰 문제는 아닙니다. 이를 통해 저의 적은 부분을 실시간으로 변경하고 페이지를 새로 고침하여 볼 수 있습니다. 또한 빠릅니다.

예 : <link rel="stylesheet" href="foo.less" />

• 생산을 위해, 나는 하나의 CSS 파일로 내 .less 파일을 컴파일 빌드 작업을 사용하여 페이지에서 직접 CSS 파일을 참조. 이것은 방정식에서 모든 것을 동적으로 취합니다.

예 : <link rel="stylesheet" href="final.css" />

Answer 2

당신은 부트 스트랩에서 모든 부분이 필요합니까? 그 때문에 많은 부 풀리는 코드.

는 주 부트 스트랩 파일에서 일부를 해제하려고 :

당신이 자바 스크립트 부품에 대한 모든 CSS가 필요하십니까?

'코드'& '테이블'이 필요합니까?

"responsive-utilities"에서는 필요하지 않은 경우 많은 의견을 제시 할 수 있습니다.

은 내가 당신에게 내 설정을 보여 드리죠, 그것은 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";