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

最新推荐文章于 2024-12-15 23:56:57 发布

FL06052146

最新推荐文章于 2024-12-15 23:56:57 发布

阅读量823

点赞数 4

文章标签： vue.js 哈希算法缓存

本文链接：https://blog.csdn.net/FL06052146/article/details/136545041

版权

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

浏览器和网站服务器是如何标识网站页面是否更新的机制？
第一次请求：

再次请求：

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <script src="<%= BASE_URL %>ipConfig.js?time=<%= new Date().getTime() %>"></script>
        <title>测试页面</title>
    </head>

    <body>
        <noscript>
            <strong>We're sorry but iods_web doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
    </body>
</html>

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

<IfModule mod_expires.c>
    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
</IfModule>

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

hash
hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值。代码如下：
在这里插入图片描述

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

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