Twitter Bootstrap: less compilation taking a long time

Question

I'm writing a simple app using Twitter Bootstrap. In my main HTML file I have the following lines:

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

so every time I refresh the page, the whole css gets generated. This takes about 15 seconds each time, so it's a pain waiting for the page to load.

I tried using SimpLESS to generate css out of the less files but the generation failed. I'll try to get that to work, but I'm also wondering whether I'm not doing something wrong...

I dislike the fact that the css is generated each time, even if I don't change the less files. Is there a way to make less cache the css somehow? Or perhaps there are other alternative solutions to this problem?

score 3 · Answer 1 · answered Sep 01 '12 at 15:02

3

I would suggest removing parts of your .less file(s) to see if anything specific is causing poor performance. It shouldn't be that slow. My guess is that a particular mixin or function is causing the issue.

I would also suggest profiling the JavaScript (Chrome has a nice JS profiler) to see if anything obvious appears, like a LESS-related function which is slow and called repeatedly.

Here's my overall LESS strategy which might be helpful to you in the future. I'm using Visual Studio and ASP.Net, but you could do this with a variety of environments.

Most importantly, no JavaScript for LESS. Everything is done server-side.
In development, I request my .less files through the dotLess HTTP handler, which processes them and handles the caching. Every now and then, the cache glitches and I have to restart my local web server, but it's not a big deal. This enables me to make real-time changes to my less and see them by just refreshing the page. It's also fast.

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

For production, I use a build action to compile my .less files into a single CSS file and reference the CSS file directly in the page. This takes everything dynamic out of the equation.

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

answered Sep 01 '12 at 15:02

Tim M.

53,671
14
120
163

Thanks, this is good advice. I'm using django... I guess my equivalent of your approach will be to get SimpLESS to work which will allow me to have all the generation on the server. – machinery Sep 01 '12 at 15:18
Server generation is best, although I'd be curious to know why the JS version is so slow. – Tim M. Sep 01 '12 at 15:22
Hmm.. it's surprising to me too. I just downloaded an intializr-generated version of Bootstrap and haven't really changed an less files yet... So it's a clean out-of-the-box version. – machinery Sep 01 '12 at 15:27
Do you get the same behavior in different browsers? – Tim M. Sep 01 '12 at 15:30
Hmm... just checked and the results are quite surprising to me. Chrome, FF and Opera take usually about 10 seconds. IE takes only 1-2. However, I managed to get SimpLESS generation to work thanks to this link: http://stackoverflow.com/questions/11683600/simpless-wont-compile-initializr-generated-bootstrap Now I'll just link to the css and it should work fast on all browsers :) – machinery Sep 01 '12 at 20:18

Mark · Answer 2 · 2014-02-22T12:29:02.260

do you need every part from Bootstrap? Because that a lot of bloat code.

Try to disable some part from the main bootstrap file:

Do you need all the CSS for JavaScript parts?

Do you need 'code' & 'tables'?

In "responsive-utilities", you can comment out a lot if you don't need it.

Let me show you my setup, it's in SASS, but the principle stays the same:

// 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";

Twitter Bootstrap: less compilation taking a long time

2 Answers2

Linked