Some time before I had posted a stackoverflow question on how we can implement optimization in the blogs without using Global.asax file. After doing some research and discussion with Peter Prochazka, I am quickly writing a post on how I implemented Bundling and optimize them in my Sitecore MVC project.
So lets get into how we can implement bundling and optimize those bundled js or css for debugging purposes.
- Add Microsoft ASP.NET Web Optimization Framework to your solution from nuget packages. You might need to install dependency packages (Microsoft.Web.Infrastructure, WebGrease, Antlr, Newtonsoft.Json). So while installing these, make sure that it does not overwrite the same Sitecore dlls (because versions differ) and there is a possibility for you to get NewtonSoft Json dependency error.
- Create a folder App_Start and a BundleConfig.cs file which will have the following code logic
- Now here is the challenge. Sitecore ships with a standard Global.asax file and a lot of Sitecore developers choose to make changes directly in this to hook into application and session level events. But I prefer not to use the Global.asax file to Register the bundles, instead we can use Sitecore pipelines. The details about the Sitecore pipelines that can be used instead of the Global.asax event handlers are provided in https://laubplusco.net/global-asax-sitecore-pipelines/.
- So I created an initialize pipeline and injected the BundleConfig which was created earlier
- In web.config set an ignore url prefix for your bundle so that Sitecore won’t try to resolve the URL to the bundle. Update setting IgnoreUrlPrefixes according to your bundle name. I have added “/bundles” in my IgnoreURlPrefixes
- Render the css and js as follows in the layout file
- So now the js and css files are now bundled and you can see them in your website source code as follows
- Next what if you need to optimize those bundles. You can do it in different ways :
As Peter Prochazka had suggested to me, creating a settings item and calling it from the Bundle Config. But here the problem is every time you make a change to the config, it need to have Sitecore restarted again and again.
So again I chose to inject using pipelines. Also the optimization is usually done from the Application_Start method of Global asax. So as we chose to use pipelines, we use the PreprocessRequest/HttpRequestBegin of the Sitecore pipelines. And here i chose to add in the end of the preprocessrequest pipeline
Now what if you need to optimize the bundles using a query string? (You can find the example in https://www.bugdebugzone.com/2015/07/bundling-and-minification-in-sitecore.html
- For this you can create a class which inherits from PreprocessRequestProcessor and write the code logic for Optimization and then add the class to the pipeline as follows :
- Then adding it into the preprocessrequest
- We can add the same using HttpRequestBegin also, but when I created it what I noticed was, when we are adding the processor to the end of the HttpRequest pipeline, it is not getting implemented as expected. The optimization is not happening. Then i tried to put it on top of the HttpRequestBegin pipeline and it works. But since I had my confusions, I preferred to implement the same at the end of preprocessrequest pipeline
- Now if you browse your URL with ?debug=true, for example, if the URL is http://www.example.local?debug=true, then you can see the following output in the source
And there it is!!! The scripts are de-optimized so that you can debug it in your website.
This was just my method for implementing Bundling and Optimization in your Sitecore MVC project. There are many other methods also without using pipelines and just using Global.asax, without optimizing etc.
Feel free to share your thoughts on this.
Till then Bye. Happy Sitecoring !!! 🙂