Posts tagged packaging

Orchard is really flexible and modular. This has a big drawback while performance tuning: it’s really hard to package the static resources. Each module has its own javascript and css files, and one module doesn’t know about the files of the other. Time to hack performance into it!

The solution I implemented was a plain batch file. It gets fed a list of css and js files and minifies them to one output file. It does take a few steps to include a new js or css file, but it performs a lot better!

Here’s the bat file, using the Microsoft Ajax Minifier and DotLess:

for /R %%i in (*.less) do (
  tools\dotless.compiler.exe "%%i" "%%i.css"
)

tools\AjaxMin-4.37.exe -js -clobber -xml "minify.xml" -out "Orchard.Web\min"

So first of all I take each *.less file and run it through the dotless compiler. The output is a *.less.css file next to each original, which I’ve included in the minify.xml file that AjaxMin parses. Here’s a portion of it:

<root>
  <output path="js.js">
    <input path="c:\inetpub/Modules/Viaselect/Scripts/plugins/jquery.ba-hashchange.min.js" />
    <input path="c:\inetpub/Modules/Viaselect/Scripts/menu.js" />

  </output>
  <output path="css.css">
    <input path="c:\inetpub/Themes/CharmeQuality/styles/base.less.css" />
    <input path="c:\inetpub/modules/viaselect/styles/datepicker.less.css" />
  </output>
</root>

Unfortunately I didn’t get it to work with relative paths, so I had to make them absolute. We’ll cross that bridge when we get there :)

So now I have a js.js and a css.css that I include in the layout.cshtml:

  Script.Require("jQuery").AtHead();
  Script.Include("~/min/js.debug.js", "~/min/js.js");
  Style.Include("~/min/css.debug.css", "~/min/css.css");

And of course when you’re in debug mode, you want firebug to give you the right codelines! Here’s how to tackle that one; the debug files contain the following:

@import url("/Themes/CharmeQuality/styles/base.less");
@import url("/modules/viaselect/styles/datepicker.less");

document.write("<script src='/Modules/Viaselect/Scripts/plugins/jquery.ba-hashchange.min.js'><\/script>");
document.write("<script src='/Modules/Viaselect/Scripts/menu.js'><\/script>");

It’s not the best solution, but for now it speeds up the site considerably! I wouldn’t know how to create a module that takes care of this. The ResourceManager is way too complicated to just include the package if the file you’re requesting is inside the xml file. If any of you have good ideas, let me know! I’d love to facilitate this module :)