javascriptjqueryasp.net-coreasp.net-core-mvcweboptimizer

How to use cache busting with WebOptimizer?


I am using the LigerShark WebOptimizer library (GitHub link) in a .NET 9.0 MVC application. I want to enable cache busting, but whenever I do so, I encounter some difficulties. I find that the documentation is lacking in this department, so i'm hoping that someone out there has this working.

Setup / code configuration

_ViewImports.cshtml:

  @addTagHelper *, WebOptimizer.Core
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Program.cs:

  // Bundling tasks abstracted into static method...
  static IAssetPipeline AddBundles(IAssetPipeline pipeline)
  {
      pipeline.AddJavaScriptBundle("~/bundles/jquery",
          "Scripts/jquery-2.1.1.js",
          "Scripts/jquery-ui-1.11.4.js",
          "Scripts/jquery.unobtrusive-ajax.js",
          "Scripts/jquery.ticker.js"
      );

      return pipeline;
  }

  // Call to the bundler
  services.AddWebOptimizer(pipeline =>
  {
      AddBundles(pipeline);
  }, opt => // I have to explicitly state a default opt...otherwise minification does not work.
  {
  });

  app.UseWebOptimizer();
  app.UseStaticFiles();   

_Layout.cshtml (referenced on all views):

  <script src="~/bundles/jquery"></script>

Issues

  1. Scripts are no longer in a bundle (e.g. /bundles/jquery), but are referenced directly. Here is the output from Firefox Developer Tools:
  GET https://localhost:7063/Scripts/jquery-2.1.1.js?v=CPMzgO5SHQa9XMvzKiSCYj6ECb0Edy0rHFl04JXlkY0 
  GET https://localhost:7063/Scripts/jquery-ui-1.11.4.js?v=R9bDu_ZQj9QsBSatxVF1s40Ckf5e7NJDAg-CYP1ZcZM
  1. The framework appears to look for the scripts in the current directory. For instance, if I navigate to https://localhost:7063/Account then the following happens:
  GET https://localhost:7063/Account/Scripts/jquery-2.1.1.js?v=CPMzgO5SHQa9XMvzKiSCYj6ECb0Edy0rHFl04JXlkY0
  GET https://localhost:7063/Account/Scripts/jquery-ui-1.11.4.js?v=R9bDu_ZQj9QsBSatxVF1s40Ckf5e7NJDAg-CYP1ZcZM

(Note the Account sub directory) The result (as expected) is a bunch of 404 errors as my scripts exist at the application root level.


Solution

  • In the options settings for AddWebOptimizer(), set the following property:

     option.EnableTagHelperBundling = true;
    

    The EnableTagHelperBundling options property is in the source code for the WebOptimizer project on GitHub, but it's not documented in the cache busting section of the readme.

    See the if block starting at line 65:

    if (Options.EnableTagHelperBundling == true)
    {
        src = AddCdn(AddPathBase(GenerateHash(asset)));
        output.Attributes.SetAttribute("src", src);
    }
    else
    {
        WriteIndividualTags(output, asset);
    }
    

    The results you stated in your original post is the code path executing the else block, and therefore, executing the WriteIndividualTags().

    Note that if you set option.EnableDiskCache = true; AND option.EnableTagHelperBundling = true;, an internal HTTP 500 error is produced (that I did not track down).

    I can reproduce the issue in your post, and verified the EnableTagHelperBundling option setting produces the following result:

    <script src="/bundles/jquery?v=OxG2vsbscvk2BRQtZ7WDNa2DwvA"></script>
    

    with /bundles/jquery?v=OxG2vsbscvk2BRQtZ7WDNa2DwvA pointing to a bundled file.