How static token refer / used in bundle and minification is working [Answered] RSS

7 replies

Last post Oct 16, 2020 06:21 PM by mgebhard

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

TDP

Member

77 Points

150 Posts

How static token refer / used in bundle and minification is working

Oct 13, 2020 01:33 PM|TDP|LINK

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;

See here static token has been used to download bundled & minified js single file but how it is working ?

whenever i change code in loader-tuning.js file and refresh page then changes reflected at client side but when download this bundled file then a fixed token has been used. we know when we change code in js file then token changes. so in my case how static or fixed token is working not clear. please share the knowledge that how fixed token is working at my end ?v=vFo0kKa-_2_wGzi6Q0u-IemkcVvXrEdKz7OrQ9g-y_c1 ?

http://localhost/MvcBM_time/bundles/AllMyScripts?v=r0sLDicvP58AIXN_mc3QdyVvVj5euZNzdsa2N1PKvb81
is for the bundle AllMyScripts and contains a query string pair v=r0sLDicvP58AIXN\_mc3QdyVvVj5euZNzdsa2N1PKvb81. 

The query string v has a value token that is a unique identifier used for caching. As long as the bundle doesn't change, 
the ASP.NET application will request the AllMyScripts bundle using this token. If any file in the bundle changes, 
the ASP.NET optimization framework will generate a new token, guaranteeing that browser requests 
for the bundle will get the latest bundle.

the above text taken from here https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification#bundle-caching

they are saying every time unique token is generated but in my above code a static token is used to download file at client side. so when some changes made in js file then static token should not work but i saw it is working at my side. so very confused how it is working. please share the knowledge and guide me.

thanks

- Reply
YihuiSun
Contributor

2730 Points

779 Posts
Re: How static token refer / used in bundle and minification is working

Oct 14, 2020 11:01 AM|YihuiSun|LINK
Hi TDP,
1. Is the function of downloadJSAtOnload() to reference js files?It looks like this:
  1. <script src="/bundles/jquery?v=8Oos0avDZyPg-cbyVzvkIfERIE1DGSe3sRQdCSYrgEQ12"></script>
2. If this is the case, you can quote it on your page like this:
  1. @Scripts.Render("~/Scripts/JQueryBundle")
  2. Let me explain to you with a simple example:
    
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js"));
    
    @Scripts.Render("~/bundles/jquery")
    
    If you define the above code, then the html rendering is like this:
    
    <script src="/bundles/jquery?v=8Oos0avDZyPg-cbyVzvkIfERIE1DGSe3sRQdCSYrgEQ1"></script>
    
    In other words, these references are automatically generated after you create the bundle(You need to use @Scripts.Render("~/bundles/jquery").), that is, you don't need to get the token yourself and then reference them.
Best Regards,

YihuiSun
.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 static token refer / used in bundle and minification is working

Oct 14, 2020 06:51 PM|TDP|LINK
Unfortunately my question not clear to you. i know when we write this code @Scripts.Render("~/Scripts/JQueryBundle")

and when we run application then this kind of js file reference added in page <script src="/bundles/jquery?v=8Oos0avDZyPg-cbyVzvkIfERIE1DGSe3sRQdCSYrgEQ1"></script>

i also know the token v=8Oos0avDZyPg-cbyVzvkIfERIE1DGSe3sRQdCSYrgEQ1 always changed when any code or line changed i js file as a result browser can download the changed file.

see my code once again
```
<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;
```
in the above code a js function is there which called on page load and that function download js bundled at client side.

i asked how the above code works ? because a fixed token has been used there like v=vFo0kKa-_2_wGzi6Q0u-IemkcVvXrEdKz7OrQ9g-y_c1

so when i change any code in any js file in bundle then how changes comes to client side which suppose not to come because when download js bundle then a static token has been used.

so i am curious to know how changed js bundle is downloading at client side with the help of static or fixed token?

because if i made any changes in any js file with in a specific bundle then new token asp.net will be generated and old token not suppose to work but i have seen the above code is working with stale token which not suppose to work.

if my question is now clear then please tell me reason how stale token is working in this case when any js file code changed in bundle?

thanks
- Reply
YihuiSun
Contributor

2730 Points

779 Posts
Re: How static token refer / used in bundle and minification is working

Oct 16, 2020 03:12 AM|YihuiSun|LINK
Hi TDP,
1. TDP
  how stale token is working in this case when any js file code changed in bundle
  - Because there is a cache file in the browser, although your js file has been changed and a new token is generated at the same time, as long as the original token is used here, the js file used is the file of the previous bundle.
2. TDP
  how changed js bundle is downloading at client side with the help of static or fixed token
  - You need to know that the token is generated after file bundling in RegisterBundles.
  - If you want to use js to get the new bundle file including the new token after changing the js file, you can write a method to return the script.
  - Here is a solution for you to refer to.
Controller
```
        public ActionResult getToken()
        {
            var result = Scripts.Render("~/Scripts/JQueryBundle");
            return Json(result.ToString(), JsonRequestBehavior.AllowGet);
        }
```
Index
```
   <script type="text/javascript">
        function downloadJSAtOnload() {
            var element = document.createElement("script");
            $.ajax({
                url: "@Url.Action("getToken")",
                success: function (data) {
                    element.src = data.split('src="')[1].split(/[">]/)[0];
                    console.log(element.src)
                    document.body.appendChild(element);
                }
            });
        }
        window.onload = downloadJSAtOnload;
    </script>
```
Here is the result.

Best Regards,

YihuiSun
.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 static token refer / used in bundle and minification is working

Oct 16, 2020 09:46 AM|TDP|LINK
Sir thanks you so much for your answer but if you see my code at top....attached here again. see here a fixed token has been using and it is working how ?

this is my question how this below code is working with fixed token value ?

because i have tested that when i change any file code then below routine download js file at client side and changed impact reflected at client side which suppose not to reflect because we know when we change any fine then new token is generated and old token not suppose to work but in my case fixed token always download changed file at client side for which i am surprise and that is why i am repeatedly asking how the below routine is working. please help me to understand that how below routine download changes in js file with fixed token. thanks
```
<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;
```
- Reply
mgebhard
All-Star

53041 Points

23613 Posts

Re: How static token refer / used in bundle and minification is working

Oct 16, 2020 02:06 PM|mgebhard|LINK

The minimized file is cached by the browser as explained in this thread and your other thread(s) with the same subject. Fetching the file from cache is the expected and openly published browser behavior. Appending a new token to the minimized file URL forces the browser to get the new minimized file from the server.

The browser's dev tools shows if the file was downloaded from the server or pulled from cache.

https://developers.google.com/web/tools/chrome-devtools
- Reply
TDP
Member

77 Points

150 Posts
Re: How static token refer / used in bundle and minification is working

Oct 16, 2020 05:09 PM|TDP|LINK
Sir my question is how old token download bundle js file where i made the changes. old token not suppose to download bundle with new changes but it is happening at my end. sir if you see my code then you surely notice token is fixed when downloading by js code.

see the code where token has been fixed. so when i made any changes in any js file of bundle named JQueryBundle then it should download old file where changes not suppose to reflect but changes comes to client side with old token. it is my question how old token is downloading new js bundle file ?
```
<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;
```
- Reply
mgebhard
All-Star

53041 Points

23613 Posts

Re: How static token refer / used in bundle and minification is working

Oct 16, 2020 06:21 PM|mgebhard|LINK

TDP

Sir my question is how old token download bundle js file where i made the changes. old token not suppose to download bundle with new changes but it is happening at my end. sir if you see my code then you surely notice token is fixed when downloading by js code.

see the code where token has been fixed. so when i made any changes in any js file of bundle named JQueryBundle then it should download old file where changes not suppose to reflect but changes comes to client side with old token. it is my question how old token is downloading new js bundle file ?

Bundled files are cached in the browser for one year. The files are NOT cached on the server. The query string simply forces the browser to download the bundled file rather than fetching the file from browser cache.

Again, this information is covered in the official documentation I linked to above.

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