locked
How this bundle and minification js file code works RRS feed

  • Question

  • User-454825017 posted

    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

    Monday, October 12, 2020 6:01 PM

Answers

  • User1312693872 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 19, 2020 3:12 AM

All replies

  • User1312693872 posted

    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

    Tuesday, October 13, 2020 3:06 AM
  • User-454825017 posted

    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.

    Tuesday, October 13, 2020 7:50 AM
  • User1312693872 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 19, 2020 3:12 AM