More and more, the market drives us to develop faster and more reliable applications, currently, the performance is another key factor in web development, and Downsizing files is crucial to succeeding. The number of bytes delivered to the browser is an important factor, since your client can have faster or slow internet connections, or has a limited device, faster pages mean better conversion, which is crucial for Digital Marketers.
Most of the projects in a CMS will have the correct architecture, with divide files internally on the project, but usually, in the end, those files will be bundled and delivered in the web browser in one single packaged.
This is a challenge imposed due to the own nature of a CMS , any content author can add multiple components in a page, which means the result of bundled.JS or .CSS files will contain all the necessary files to run all the components available on the CMS, in most of the cases, all dependencies code.
So, what strategy can be used in a Sitecore specifically to reduce the number of bytes delivered in the webbrowser? There are some, and one It would be associate each Rendering with the respective dependencies (JS files and .CSS files) and in order to use this and the achieve this would be using the “Habitat Assets Foundation module” (https://github.com/Sitecore/Habitat/blob/master/src/Foundation/Assets.
This module allows the Developer to include the .JS and CSS at the rendering Level, so in this way, instead of delivering one .css or js bundled in one single file, it’s possible to use only the necessary files(js,css) to load the rendering.
The module is flexible and excellent, and it will generate on the page the following output
/js/banner.js
the only minor issue is that this file will not be on the site bundle anymore, so it will not be minified, generating another issue.
SOLUTION
So, now you have just the necessary dependencies for that rendering, but the files are not minifed, How to Minify them?
Open the file RenderAssetsService.cs located on the “Habitat Assets Foundation module” and modify line 39 for the following :
For the JavaScript
var bundleJs = Scripts.RenderFormat(“”, item.Content);
The usage of “Scripts.RenderFormat” is from the “using System.Web.Optimization” and it’s probably already being used in the project , if not, check this article for more information
the second change is to create a bundle file with the correct path
bundles.Add(new ScriptBundle("~/js/banner.js).Include(
"~/assets/javascripts/banner.js"
));
In this way, the result it will be in the following HTML output
type=”text/javascript” src=”/js/banner.js?v=lHYqQthG9kLHbT7SQgj6BvkNIbRID5Zwl0oHFt_dZLY1″>
That means the banner, is bundled and the page will use only the necessary .JS files to run the page.
The same solution can be applied for the .CSS as well
Conclusion :
This technique will break one single bundled file into multiple small .js files, (and minified) allowing the reduction of bytes delivered to the webbrowser.
Video Presentation: Delivering Small JS & CSS files
Source Code: Github Project with the implementation
PowerPoint : https://sitecoretips.blog/wp-content/uploads/2019/11/delivering-small-java-scripts-files.pptx
Sitecore Tips 
You must be logged in to post a comment.