Compile less on front-end

Question

How can i compile less in efficiently on the browser? I'm using this code to compile less on the browser but this is taking very long time in compilation. I need to compile it on the browser not in back-end.

<script>
    less = {
        env: "development",
        logLevel: 2,
        async: false,
        fileAsync: false,
        poll: 1000,
        functions: {},
        dumpLineNumbers: "comments",
        relativeUrls: false
    };
</script>
<script src="http://cdn.storehippo.com/assets/less-1.5.0.js"></script>
<script src="lessfile.less"></script>

Answer 1

In fact your question is very broad. Why do you have to compile your code client side? How does you code look? What, if any, changes when you compile you code again?

See also:

1. how to optimize Less CSS? how to generate 1 minified version of all less files? I am also using modifyVars
2. Is it faster to precompile less?

In most cases you should not use Less in a product environment. When you do for some reason you can try to optimize compile time.

You are using env: "development", that option prevent Less from caching the compiled code. Every @import directive in your code requires an file that has to be open and read over http. Consider to split your code into a static part (compile css) and dynamic part that have to be compiled for every request.

update

Also see: https://github.com/less/less.js/issues/2339 if your are using Safari:

You can re-enable chunking with {chunkInput: true} in the less options (or data-chunk-input="true" attribute on the less link).