浏览器请求出现问题,浏览器不提供缓存的文件,每次都下载js / css文件

时间:2018-07-17 08:22:28

标签: javascript browser browser-cache amazon-cloudfront

对于UI库,我目前正在使用cloudfront,其中包含js / css文件列表,如下所示:

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

ClientLibs.js如下所示:

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是第一个在浏览器中下载的文件,然后加载所有文件js / css。为了按执行顺序加载文件,我正在使用head.js。 这些js / css文件名是指纹,当任何文件的内容更改时,指纹也会更改。

现在的问题是在下载ClientLibs.js之后,每次在浏览器上每次都下载上述每个js / css文件,并且浏览器不提供缓存的文件。从逻辑上讲,如果文件名没有更改,则应提供浏览器缓存的文件,这没有发生。由于下载每个文件大约需要3秒钟,因此我的UI越来越慢。当文件在浏览器缓存中不可用时,第一次会出现延迟,但是从下次开始,必须交付缓存的文件(不更改名称)。

下面是从浏览器发送的请求正文:

  

卷曲“ https://xwsxwwxxwx.cloudfront.net/9cea63c67b1f5be1.min.js”   -H“引荐来源: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“-压缩

下面是响应标头:

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

为什么我的请求每次都向Cloudfront发送,并且每次都下载相同的文件,而不是浏览器提供缓存的文件?

0 个答案:

没有答案