For UI libraries , i am currently using cloudfront, where i have list of js/css files, as shown below:
0b3fb6c9341da0e5.min.js
1d4c3d5cded23cb2.min.css
1f8c315a86fefd13.min.js
2e91a32ab37b51d5.min.css
3c2c0190729a5de6.min.css
05e03b1ae258b4cd.min.css
6b57aee2f30f846b.min.js
6e94559c187d5d00.min.css
7ec73ef718990b40.min.css
8ac01bbb7f05e0a9.min.css
8ecc22d878e7a93c.min.js
9a00d70cd5a8f544.min.css
9c985ebf75510b88.min.js
9cea63c67b1f5be1.min.js
9f5b4fa634590543.min.js
9fbf1ad9f03c2aea.min.js
34f252296c86892b.min.css
39ffcb4194a365fc.min.css
46f426bcfc9dd89c.min.css
52bf1c32f66e3366.min.css
74bfd02e310d0c96.min.css
84df93ace8f5ef4d.min.css
142be8c3821af955.min.js
203de59f43c37bf1.min.js
578c82bda81f22b0.min.js
618e47bf25693edd.min.js
760d38056678fd75.min.js
875c6c2b1d6050e5.min.js
6012e3e21c48364e.min.css
6048e657d7aa5b54.min.css
7351efd5ad3a8219.min.css
08183e329b2e2271.min.js
09511a5f22cca316.min.css
21042ac781e41609.min.js
27525a908ad9afa6.min.css
60389faa6bd7dd9c.min.js
76326bfb46c06d0f.min.js
22635695f659cee6.min.css
211850746383fd35.min.css
a6d3e29a3d37ea9b.min.js
a54a2ed744d894ca.min.js
aa6c83d100400291.min.css
ab374f067fa53248.min.js
ab612c7a907116a6.min.css
bc0c3159d13ffdaf.min.css
bd8afe179660ea2d.min.js
c765ce94b008b43a.min.css
cebd04bf55acaf98.min.css
cee566872b34f713.min.js
d8f1442c712a0ebd.min.js
d558c31995ff2df8.min.js
d6895ea382f230c4.min.js
da39a3ee5e6b4b0d.min.css
e3dbd06c2ca4b6f0.min.js
e64a562a726c1b03.min.css
e555a7200b70dcee.min.css
e42889a5f8827ba2.min.js
eca0f8862dcabafd.min.js
f0f87111323846b8.min.js
f1dfcf7b4fefa04b.min.js
f4f10343572d255f.min.js
f8ca1b73cca8a4e8.min.js
fc03b8795f0d7faa.min.js
fd4e563878f699ca.min.css
fe68b7820bc0cf4f.min.css
ClientLibs.js
where ClientLibs.js looks something like below:
var basePath = 'https://xwsxwwxxwx.cloudfront.net/,
filesFingerPrint = [
0b3fb6c9341da0e5.min.js,
1d4c3d5cded23cb2.min.css,
1f8c315a86fefd13.min.js,
2e91a32ab37b51d5.min.css,
3c2c0190729a5de6.min.css,
05e03b1ae258b4cd.min.css,
6b57aee2f30f846b.min.js,
6e94559c187d5d00.min.css,
7ec73ef718990b40.min.css,
8ac01bbb7f05e0a9.min.css,
8ecc22d878e7a93c.min.js,
9a00d70cd5a8f544.min.css,
9c985ebf75510b88.min.js,
9cea63c67b1f5be1.min.js,
9f5b4fa634590543.min.js,
9fbf1ad9f03c2aea.min.js,
34f252296c86892b.min.css,
39ffcb4194a365fc.min.css,
46f426bcfc9dd89c.min.css,
52bf1c32f66e3366.min.css,
74bfd02e310d0c96.min.css,
84df93ace8f5ef4d.min.css,
142be8c3821af955.min.js,
203de59f43c37bf1.min.js,
578c82bda81f22b0.min.js,
618e47bf25693edd.min.js,
760d38056678fd75.min.js,
875c6c2b1d6050e5.min.js,
6012e3e21c48364e.min.css,
6048e657d7aa5b54.min.css,
7351efd5ad3a8219.min.css,
08183e329b2e2271.min.js,
09511a5f22cca316.min.css,
21042ac781e41609.min.js,
27525a908ad9afa6.min.css,
60389faa6bd7dd9c.min.js,
76326bfb46c06d0f.min.js,
22635695f659cee6.min.css,
211850746383fd35.min.css,
a6d3e29a3d37ea9b.min.js,
a54a2ed744d894ca.min.js,
aa6c83d100400291.min.css,
ab374f067fa53248.min.js,
ab612c7a907116a6.min.css,
bc0c3159d13ffdaf.min.css,
bd8afe179660ea2d.min.js,
c765ce94b008b43a.min.css,
cebd04bf55acaf98.min.css,
cee566872b34f713.min.js,
d8f1442c712a0ebd.min.js,
d558c31995ff2df8.min.js,
d6895ea382f230c4.min.js,
da39a3ee5e6b4b0d.min.css,
e3dbd06c2ca4b6f0.min.js,
e64a562a726c1b03.min.css,
e555a7200b70dcee.min.css,
e42889a5f8827ba2.min.js,
eca0f8862dcabafd.min.js,
f0f87111323846b8.min.js,
f1dfcf7b4fefa04b.min.js,
f4f10343572d255f.min.js,
f8ca1b73cca8a4e8.min.js,
fc03b8795f0d7faa.min.js,
fd4e563878f699ca.min.css,
fe68b7820bc0cf4f.min.css],
jsFilesList = [],
cssFilesList = [];
_.each(filesFingerPrint, function (compName) {
if (compName.split('.min.')[1] === 'js') {
jsFilesList.push(basePath + "/" + compName);
} else {
cssFilesList.push(basePath + "/" + compName);
}
});
head.load(cssFilesList);
head.load(jsFilesList, function() {
T.Analytic.init({
el: '#el',
leftRailElementClass: '.rail-item-list',
visible: true
});
});
ClientLibs.js is first file which get download at browser, which then loads all file js/css. To load files i in execution order i am using head.js. These js/css file name are fingerprint which changes when content of any file change.
Now issue is after downloading of ClientLibs.js, each of above js/css files are getting download each time on browser, and browser is not serving the cached file. Logically if filename do not changes then browser cached file should be served, which is not happening. Due to which downloading each file takes around 3 sec and my UI is getting slow. Delay can be expected for first time when file not available in browser cache , but from next time onward, cached file must be delivered (in no name change).
Below is request body which is being sent from browser:
curl "https://xwsxwwxxwx.cloudfront.net/9cea63c67b1f5be1.min.js" -H "Referer: http://mycompany-wx-1.corp.company.com:4502/analytic.html" -H "User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36" --compressed
Below is response header:
accept-ranges: bytes
age: 1266
content-length: 81991
content-type: application/javascript
date: Tue, 17 Jul 2018 07:11:38 GMT
etag: "17ac8fca7fb779f314c5569023847856"
last-modified: Tue, 17 Jul 2018 06:46:05 GMT
server: AmazonS3 status: 304
via: 1.1 289241c3afsasab6a8f02210.cloudfront.net (CloudFront)
x-amz-cf-id: IdcQaC_weDOwqa-WlFWaQxvB-rfkJZ5xwopBT3BCVD7BT_Q==
x-cache: Hit from cloudfront
Why my request is going to cloudfront every time and downloading same file everytime rather than browser serving cached file?
