vue打包优化3：hash解决浏览器缓存

什么是浏览器缓存：

简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过网站的网页，当再次访问这个URL地址的时候，如果网页没有更新，就不会再次下载网页，而是直接使用本地缓存的网页。只有当网站明确标识资源已经更新，浏览器才会再次下载网页。

浏览器和网站服务器是如何标识网站页面是否更新的机制？

第一次请求：

image.png

再次请求：

image.png

解决缓存问题的思路

方案一：打包时，给文件名称后面加hash值，强制浏览器重新加载新文件（具体方法见后文）
方案二：在静态文件引用时，在路径后面，增加时间戳或者随机数。该方案时对方案1的补充。因为方案1不能解决静态资源的问题。比如跟后台链接的ipConfig.js文件放在public路径下，打包时是直接复制到dist下的，不会修改文件名称，不能加hash。

方案三： Expires、Last-Modified、Etag缓存控制。该方案也是对前两个方案的补充。该方案主要使用于，在应用运行过程中被动态修改的文件，缓存在浏览器，不能重新加载的场景。
具体的修改方法是，在apache的httpd.conf中，

1. 去掉模块前的注释：LoadModule expires_module modules/mod_expires.so
2. 并在该文件中增加下面代码

    ExpiresActive On
    ExpiresDefault "modification plus 0 seconds" 
    ExpiresByType image/x-icon A2592000
    ExpiresByType application/x-javascript A2592000
    ExpiresByType text/css A2592000
    ExpiresByType image/gif A604800
    ExpiresByType image/png A604800
    ExpiresByType image/jpeg A604800
    ExpiresByType text/plain A604800
    ExpiresByType application/x-shockwave-flash A604800
    ExpiresByType video/x-flv A604800
    ExpiresByType application/pdf A604800
    ExpiresByType text/html A900

方案一的具体实现：webpack打包时给文件添加hash值：

hash值的添加，有三种：hash，chunkhash，contenthash。用法和区别如下：

1. hash
   hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值。代码如下：

   
   
   image.png

2 chunkhash
采用hash计算的话，每一次构建后生成的哈希值都不一样，即使文件内容压根没有改变。这样子是没办法实现缓存效果，我们需要换另一种哈希值计算方式，即chunkhash。
chunkhash和hash不一样，它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。配置如下：

        output: {
            path: path.resolve(__dirname, 'dist'),
            // filename: '[name].[hash:5].js'
            filename: '[name].[chunkhash].js'
        },

注意下图，使用chunkhash时，entry有多个入口