How this bundle and minification js file code works[Answered] RSS

• • Reply
  TDP

  Member

  77 Points

  150 Posts

  How this bundle and minification js file code works

  Oct 12, 2020 06:01 PM|TDP|LINK

  i run a code and found this way bundle and minify the file. not at all clear how it is working.

              bundles.Add(new ScriptBundle("~/Scripts/JQueryBundle").Include(
            "~/Scripts/JSBundle/874e81b04a.js",
            //"~/Scripts/JSBundle/jquery-1.10.2.js",
            "~/Scripts/JSBundle/2.1.1-jquery.min.js",
            "~/Scripts/JSBundle/popper.min.js",
            "~/Scripts/JSBundle/bootstrap.min.js",
            "~/Scripts/simplebar.js",
            "~/Scripts/JSBundle/json2.js",
             "~/Scripts/JSBundle/jquery.dataTables.min.js",
            "~/Scripts/JSBundle/dataTables.fixedColumns.min.js",
            //"~/Scripts/JSBundle/jquery-ui.js",
            "~/Scripts/JSBundle/1.9.2-jquery-ui.js",
             //"~/Scripts/JSBundle/jquery.sortable.js",
             "~/Scripts/JSBundle/2-9-Chart.min.js",
             "~/Scripts/loader-tuning.js",
             "~/Scripts/main.js"
            ));

  <script type="text/javascript">
  function downloadJSAtOnload() {
              var element = document.createElement("script");
              element.src = "/Scripts/JQueryBundle?v=vFo0kKa-_2_wGzi6Q0u-IemkcVvXrEdKz7OrQ9g-y_c1";
              document.body.appendChild(element);
          }
  		
  </script>
  
  // Check for browser support of event handling capability
  if (window.addEventListener)
  	window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
  	window.attachEvent("onload", downloadJSAtOnload);
  else
  	window.onload = downloadJSAtOnload;	

  this area not clear "/Scripts/JQueryBundle?v=vFo0kKa-_2_wGzi6Q0u-IemkcVvXrEdKz7OrQ9g-y_c1";

  see a static query string is passing to load the fine v=vFo0kKa-_2_wGzi6Q0u-IemkcVvXrEdKz7OrQ9g-y_c1"; how this static query string value should work ?

  because few js file could be modified then query string value should be changed. how this static query string value is working because i have seen when i add some line in a specific js file that is working fine means changes comes to client side ?

  please help me to understand above code specially query string area . thanks

• • Reply
  Jerry Cai

  Participant

  990 Points

  327 Posts

  Re: How this bundle and minification js file code works

  Oct 13, 2020 03:06 AM|Jerry Cai|LINK

  Hi, TDP

  When we run the application in the release mode, we will see the bundle is created and loaded in a single request like

  

  And the JS function in your code will create an html like

  <scripts src="~/Scripts/JQueryBundle?v=vFo0kKa-_2_wGzi6Q0u-IemkcVvXrEdKz7OrQ9g-y_c1"/>

  It is used to help creating the bundle, and then

  window.onload = downloadJSAtOnload;

  will load the bundle.

  You can check this link:

  https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification#bundle-caching

  Best Regards,

  Jerry Cai

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.
• • Reply
  TDP

  Member

  77 Points

  150 Posts

  Re: How this bundle and minification js file code works

  Oct 13, 2020 07:50 AM|TDP|LINK

  my question is how this query string can be static in code vFo0kKa-_2_wGzi6Q0u-IemkcVvXrEdKz7OrQ9g-y_c1

  function downloadJSAtOnload() {
              var element = document.createElement("script");
              element.src = "/Scripts/JQueryBundle?v=vFo0kKa-_2_wGzi6Q0u-IemkcVvXrEdKz7OrQ9g-y_c1";
              document.body.appendChild(element);
          }

  here querystring is hard code see the above code but this is generated dynamically and when code change in js file then this dynamic querystring changed. so in above code query string is static. so when i change any js file code then it should be different as a result will load that file again and not serve from cache. my question is how the above code works because there query string mention is fixed means static.

  but when i run the application it was working. i add one alert in js code the and reload the page then alert was showing.

• • Reply
  Jerry Cai

  Participant

  990 Points

  327 Posts

  Re: How this bundle and minification js file code works

  Oct 19, 2020 03:12 AM|Jerry Cai|LINK

  Hi, TDP

  In the BundleHandler class calls the ProcessRequest,it is an internal method of the Bundle class, and it calls SetHeaders just before the 'HttpContext.Response.Write' , so the cache is set to one year before response write. 

  The query string in your code will force the browser to download the file rather than get it from cache.

  You can check the following link:

  https://stackoverflow.com/questions/14374656/mvc-bundle-client-caching

  Best Regards,

  Jerry Cai

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.