fis3解决web网站缓存问题

项目上线一段时间后如果更新JS或CSS文件，而客户端已经对该文件缓存过了，那就有可能会无法及时更新而继续采用旧的JS或CSS文件，无法达到想要的效果。

　　处理类似情况最有效的解决方案就是修改其所有的链接，这样，请求就会从服务器下载最新的内容。但是要怎么改呢？

一：通过query的方式添加随机数。这样虽然可以保证每次都能获取到最新的静态资源，但即使没有更新也会去重新下载，缓存也就失去了意义，增加了服务器的负担。

二：通过query的方式添加时间戳或者版本号

这种解决方案很是直观，每次更新只需要更新相关的静态资源和页面，做到了局部更新，减轻了服务器负担，同时也使得浏览器缓存得到了有效利用。

　　但是，如果是访问量比较大的网站的话，还是会面临一些新的问题的。

通常，发布新版本也就是发布新的静态资源和页面的过程。比如：要发布一个index.aspx的页面，同时引入了index.js的资源。发布新版本就是要覆盖服务器上的这两个文件，不管你怎么操作，这两个文件在覆盖的过程中总会产生时间间隙的，对于访问量大的网站，在这个时间间隙内有可能是会出现新的用户访问的，这时，错误就发生了，新页面旧的静态资源或者旧页面新的静态资源。由于静态资源是覆盖发布，对于使用CDN缓存的网站来说还有可能面临CDN缓存攻击。

三：基于文件内容的hash版本冗余机制，也就是直接修改文件的URL，而不是在其后添加query

其中”_a5dae5b”字符是根据index.js的文件内容进行hash运算得到的，只有文件内容发生变化了才会有更改。

　　由于不是同名覆盖，这样就完美的解决了发布的间隙问题，可以做到无缝连接；同时遇到问题回滚的时候只需要回滚页面就可以了。

安装Node和NPM

运行node-v6.11.4-x64安装文件安装Node和NPM

安装FIS3

运行cmd命令，执行以下安装命令安装FIS3

npm install -g fis3

安装完成后执行 fis3 -v 判断是否安装成功，如果安装成功，则显示类似如下信息：

fis3解决web网站缓存问题

使用FIS3发布MVC站点

1.编写发布脚本

FIS3的发布脚本为一个js脚本，用来控制执行发布命令时FIS3所做的操作。发布脚本需要放到待发布网站文件的根目录中。

// 加 md5,及静态资源命中规则
fis.match('/Areas/CommercialTenant/Content/**.{js,css,png,jpg,gif}', {
    useHash: true,
    release: '/Static/$0'//静态资源文件夹
});
fis.match('/Content/{Blue,Images}/**.{js,css,png,jpg,gif}', {
    useHash: true,
    release: '/Static/$0'//静态资源文件夹
});
fis.match('/Upload/**', {
    release: false//发布时不产出文件
});
fis.match('/Config/DaoConfig.xml', {
    release: false//发布时不产出文件
});

fis.match('*.js}', {
    // fis-optimizer-uglify-js 插件进行压缩，已内置
    optimizer: fis.plugin('uglify-js')
});
fis.match('*.min.js', {
    //已经压缩过的js不进行压缩
    optimizer: null
})
fis.match('*.css', {
    // fis-optimizer-clean-css 插件进行压缩，已内置
    optimizer: fis.plugin('clean-css')
});


//fis.match('*.png', {
//    // fis-optimizer-png-compressor 插件进行压缩，已内置
//    optimizer: fis.plugin('png-compressor')
//});


//// 启用 fis-spriter-csssprites 插件
//fis.match('::package', {
//    spriter: fis.plugin('csssprites')
//});

//// 对 CSS 进行图片合并
//fis.match('*.css', {
//    // 给匹配到的文件分配属性 `useSprite`
//    useSprite: true
//});


//// 启用插件
//fis.hook('relative');
//// 让所有文件，都使用相对路径。
//fis.match('**', {
//    relative: true
//})

View Code