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?

Answer 1

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