It happened to me, that I was working on an ASP.NET MVC Razor with AngularJs application, and every time that the team make a change in the AngularJs files and deploy to Production, the users start complaining about unresolved issues in the application. Those issues were because of the browser cache the JavaScript files in the client side. So in this article, I'll try to find an optimal solution to this problem, meaning that the javascript bundle should avoid cache when a new version of the application is deployed to production.
Avoiding browser cache:
We have to consider that one of the most popular techniques to avoid browsers cache with javascript files is to add a variable at the end of the file name, like this: src="/app/app.js?nocache=12365434576".
<script type="text/javascript" src="/app/app.js?nocache=12365434576"></script>
Now this resolve the issue partially since 12365434576 it's going to be a random number that always going to avoid the cache, and we don't want that, we want to avoid cache only when a new version is deployed, for a better performance. So what we need to do is, instead of set the nocache var to a random number we are going to user the version of the application, like this:
Bundle Code:
We had a code like this to compose the bundle in App_Start/BoundleConfig.cs
private static void AddAppBundles(BundleCollection bundles)
{
var path = "admin";
var scriptBundle = new ScriptBundle("~/js/app");
var FullPath = HttpContext.Current.Server.MapPath(string.Format("~/{0}", path));
if (Directory.Exists(FullPath))
{
scriptBundle.Include(
// Order matters
string.Format("~/{0}/app.module.js", path),
string.Format("~/{0}/app.core.module.js", path)
)
.IncludeDirectory(string.Format("~/{0}", path), "*.module.js", true)
.IncludeDirectory(string.Format("~/{0}", path), "*.js", true);
}
bundles.Add(scriptBundle);
}
With the code above we can include all the javascript files found in "path" variable in our _Layout.cshtml page, with this code:
@Scripts.Render("~/js/app")
The code is going to render something like this:
<script type="text/javascript" src="/app/app.js"></script> <script type="text/javascript" src="/app/config.js"></script> <script type="text/javascript" src="/app/dashboard/dashboard.module.js"></script> <script type="text/javascript" src="/app/layout/layout.module.js"></script> <script type="text/javascript" src="/app/blocks/apiendpoint.config.js"></script> <script type="text/javascript" src="/app/blocks/apiendpoint.provider.js"></script>
The question here is how we can render something like this src="/app/app.js?nocache=1.28.16145.10", when we render the bundle in razor.
We are going to use @Scripts.RenderFormat.
Solution:
@{
string version = typeof(yourProjectNamespace.WebApiApplication).Assembly.GetName().Version.ToString();
}
<!--app scripts.-->
@Scripts.RenderFormat("<script type=\"text/javascript\" src=\"{0}?nocache="+ version +"\"></script>", "~/js/app")
This is an example of the result rendered:
<script type="text/javascript" src="/app/app.js?nocache=1.28.16145.10"></script> <script type="text/javascript" src="/app/config.js?nocache=1.28.16145.10"></script> <script type="text/javascript" src="/app/dashboard/dashboard.module.js?nocache=1.28.16145.10"></script> <script type="text/javascript" src="/app/layout/layout.module.js?nocache=1.28.16145.10"></script> <script type="text/javascript" src="/app/blocks/apiendpoint.config.js?nocache=1.28.16145.10"></script> <script type="text/javascript" src="/app/blocks/apiendpoint.provider.js?nocache=1.28.16145.10"></script>
Hope this was helpful. 🙂
