Parse the LESS into CSS for Production Deployment

In website responsive design, to accommodate different browsers and mobile devices, it would be nice to have site-wide variables to make site layout dynamic change according to user’s browsing devices. So LESS CSS framework seems a good thing with the variables and nesting. But recently we encountered site performance issue and one thing we found that LESS compile during the site initial load cost lots server resource. So Programming with Less and then have it compile for production is a better approach than Parsing LESS files on the fly and serve them as CSS. This way actually parses the LESS into CSS and outputs the CSS to a file, then it is cached both on the server and visitors browsers, will make page load much faster.

Below is a example of LESS CSS framework applied in a web site I worked. There are tons of LESS files been programmed/embed. Instead of using many other tools to compile LESS to CSS, simply we can launch the site with normal browser and view the source to get all the css code generated from server. Then save them into a css file named “dist.css”.

  1. In AppSetting, add a new key <add key=”UseCdn” value=”true”/>
  2. In bundle configuration, add CDN path when creating a new bundle.
  3. Set bundles.UseCdn = true or false according to cdn key in AppSetting
  4. Set BundleTable.EnableOptimizations = true if debug=”true”; or simply set debug=”false” in web.config

 

  12-12-2013-1

 Server generated css: 12-12-2013-2

Bundle Setting:12-12-2013-3

This entry was posted in Information Technology, MVC and tagged , , , , , . Bookmark the permalink.