Http caching to optimize front-end performance of

Not long ago, the company's front-end meeting, the leadership of pumping asked four questions, the first three simple answer everyone up, the first four questions in this regard cache I just understand, the results just asked me (will not ask, I'm not familiar singled ask, my luck is really none), more than 20 front-end look at me, the answer was not very good, feeling very shy skin, then re-examine and record the results.

Cached speak and differentiation form 200 cache and 304

If every time requires you to access data from the server, then the speed and traffic is bound to have problems, so we need to solve the http cache. If the file is not updated to use cached the original file.
Cache Cache divided into strong and consultation Cache
strong cache server refers not ask this file has not been updated, as long as the buffer time, use the cached file, then display 200 form cache on the network,
there are two strong attributes control cache , Expires and Cache-Control: max-age, Expires http 1.0 is defined using relative time, if the two sides are not unified with the server time will be a problem in order to solve this problem so it was a http 1.1 definition Cache -Control: max-age, use of this property is relatively time is generally 2 are added, and then take the relative time properties.
Whether they are first negotiated cache file servers ask for updates, follow the prompts to decide whether to use the server's cache, due to the much stronger than the cache server to ask this step is not as fast as it is bound to strong cache.
Consultations cache also has two attributes, namely ETag and If-None-Match, Last- Modified and If-Modified-Since, every request, the browser will save ETag and Last-Modified acquired in the next tune when will pass if-None-Match and if-Modified-Since the past, the value is the last acquisition value ETag and last-Modified, and then whether there are changes to decide whether to take the cached data based on the value returned, last-Modified is time to judge, ETag with an identifier, was the result of two because the Last-Modified is only accurate to the second, if there are multiple data calls in one second, it will not do anything, so there has been advanced ETag, using the negotiated cache time status display is 304

Work nginx + vue @ cli3 + cache optimization

工作中正常情况下除了html其余资源都使用强缓存，html使用协商缓存，当打包重新构建的时候，html使用协商缓存会发现html变了，然后从服务器读取新的html，由于打包后html引用的文件hash值不一样，就会重新加载新的各种文件，但是通过查看hash值发现，

1 no document change, will change the hash value app.js
2 only js file obviously change, but app.js and app.css the hash will change the
hash become the means reloaded, but obviously did not change the file, Why change hash values, so that certain documents in vain more than once it loads,
find information discovery, HashedModuleIdsPlugin can solve your problem

configureWebpack: config => {
    return {
      plugins: [
        new webpack.DllReferencePlugin({
          context: process.cwd(),
          manifest: require('./public/vendor/vendor-manifest.json')
        }),
        // 在控制台中输出可读的模块名
        new webpack.NamedModulesPlugin(),
        // 不做改动hash保持不变
        new webpack.HashedModuleIdsPlugin()
       
      ]
    }
  },

It is also interesting to note that if you want to try to html also set to strong cache (cache configuration nginx to set time), refresh the browser page, you'll find html or 304, to see the head and found Expires and Cache-Control : max-age these two are, but why is it 304, the internet did not say this, followed Scrapped found a page from the new tab page, then enter your website for the first time with a strong cache, the back is 304, although this is not helpful. . .