Web Site Performance and Assembly Versioning
I originally wanted to write this post in one, but there is quite a large amount of information which can be broken down into different areas, so I am going to publish it in three posts.
Versioning Combined Files Using Subversion
Versioning Combined Files Using Mercurial – published shortly
There are many ways to improve web site performance, two areas are reducing the amount of data that is served up from the web server and reducing the number of files that are requested.
To edit the project file in Visual Studio, you need to first unload it by right clicking the project in Solution Explorer. I prefer to do this in a third party tool such as Notepad++ and save it there forcing VS to reload it each time I make a change as the whole process in Visual Studio can be a bit tedious.
Now you have the project file, you will notice that it is an MSBuild project file.
1. Import the tasks for AjaxMin choosing the location you installed to. I keep all third party utilities in a Tools directory within my solution structure and source control. This way I know I can get the entire solution from source control without worrying about what other tools I need to get the project to build locally.
1: <Import Project="..\Tools\MicrosoftAjaxMinifier\AjaxMin.tasks" />
2. Now create ItemGroups for all your js and css files like this. Separating out your non minified files and minified files. This can go in the AfterBuild container.
1: <Target Name="AfterBuild">
5: <JSMin Include="Scripts\jqModal.js" />
6: <JSMin Include="Scripts\jquery.jcarousel.js" />
7: <JSMin Include="Scripts\shadowbox.js" />
9: <!-- CSS files that need minimizing -->
11: <CSSMin Include="Content\Site.css" />
12: <CSSMin Include="Content\themes\base\jquery-ui.css" />
13: <CSSMin Include="Content\shadowbox.css" />
3: <JSCat Include="Scripts\jqModal.min.js" />
4: <JSCat Include="Scripts\jquery.jcarousel.min.js" />
5: <JSCat Include="Scripts\shadowbox.min.js" />
7: <!-- CSS files to combine -->
9: <CSSCat Include="Content\Site.min.css" />
10: <CSSCat Include="Content\themes\base\jquery-ui.min.css" />
11: <CSSCat Include="Content\shadowbox.min.css" />
3. Call AjaxMin to do the crunching.
1: <Message Text="Minimizing JS and CSS Files..." Importance="High" />
2: <AjaxMin JsSourceFiles="@(JSMin)" JsSourceExtensionPattern="\.js$"
3: JsTargetExtension=".min.js" JsEvalTreatment="MakeImmediateSafe"
4: CssSourceFiles="@(CSSMin)" CssSourceExtensionPattern="\.css$"
5: CssTargetExtension=".min.css" />
This will create the *.min.css and *.min.js files in the same directory the original files were.
1: <Message Text="Concat JS Files..." Importance="High" />
2: <ReadLinesFromFile File="%(JSCat.Identity)">
3: <Output TaskParameter="Lines" ItemName="JSLinesSite" />
5: <WriteLinestoFile File="Scripts\site-script.combined.min.js" Lines="@(JSLinesSite)"
6: Overwrite="true" />
7: <Message Text="Concat CSS Files..." Importance="High" />
8: <ReadLinesFromFile File="%(CSSCat.Identity)">
9: <Output TaskParameter="Lines" ItemName="CSSLinesSite" />
11: <WriteLinestoFile File="Content\site-style.combined.min.css" Lines="@(CSSLinesSite)"
12: Overwrite="true" />
5. Save the project file, if you have Visual Studio open it will ask you to reload the project. You can now run a build and these minified and combined files will be created automatically.
6. Finally reference these minified combined files in your web page.
In the next two posts I will cover versioning these files to match your assembly.