前端缓存问题

偏执的太偏执、 2022-06-10 14:06 191阅读 0赞

一、静态资源

由于浏览器存在缓存，在静态资源版本变更的时候，为了能正常生效，往往需要在引用链接中添加版本号。但是大量的静态资源，版本号往往很不好管理。为了解决这个问题，可以利用百度的fis工具，它可以为静态资源重新生成文件名，文件名为该文件名+文件MD5指纹的哈希值。同时修改html中对静态资源的引用。

fis的安装

下载Nodejs环境，版本要求为0.8.x，0.10.x, 0.12.x，4.x，6.x。

推荐通过淘宝的cnpm安装，通过npm安装淘宝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

通过cnpm安装fis

cnpm install -g fis3

创建配置文件

配置文件为fis-conf.js，需要新建，配置项可以详细查看官方文档。举个例子如下：

fis.match('/ecAdminRealse/css/flow.css',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/css/forget.css',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/css/regist.css',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/css/statistics.css',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/css/style.css',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/css/style1.css',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/css/upload.css',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/images/*',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/images/activity/*',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/images/marketing/*',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/js/dateFormatter.js',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/js/imgPreview.js',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/js/SysConstants.js',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/js/urlParamUtil.js',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/js/cookieUtil.js',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/js/validate.js',{
      useHash: true
    });
    
    fis.match('/ecAdminRealse/js/pager/js/admin/*',{
      useHash: true
    });

生成新的前端文件夹

在有配置文件fis-conf.js和源前端代码的文件夹下调用如下命令

fis3 release -d output

其中output为输出文件夹

![Center][]

---------------------------------------------------

![Center 1][]

-----------------------------------------------------

![Center 2][]

-----------------------------------------------------

![Center 3][]

二、ajax请求

对于ajax的请求，加入全局配置$.ajaxSetup(\{cache:false\});即可

[Center]: /images/20220610/ba00fcc4f0f141eba15319f31a357f91.png
[Center 1]: /images/20220610/203cb8ccbc454feab6b25b39c0dd11ff.png
[Center 2]: /images/20220610/2ff33c0f1558402381c5646433398d46.png
[Center 3]: /images/20220610/47948ab249e04b52b0fcdb32022b2871.png