fis3解决web网站缓存问题

为什么使用FIS3

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

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

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

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

<script type="text/javascript" src="index.js?t=20170325"></script>

<script type="text/javascript" src="index.js?v=1.0.0.0"></script>

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

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

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

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

<script type="text/javascript" src="index_a5dae5b.js"></script>

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

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

---

安装Node和NPM

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

安装FIS3

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

npm install -g fis3

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

使用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
//})

此名为MyWeb的文件夹为使用VS2013文件发布的网站站点文件夹，其中的fis-conf文件为FIS3发布文件。

关于fis-conf配置文件的编写，请参考http://fis.baidu.com/fis3/docs/beginning/intro.html

2.将待发布网站文件上传到服务器，并将编写好的发布脚本放到待发布的网站文件根目录中。

如：本机网站目录文件在d:\MyWeb中，在服务器上的“D:\待发布网站文件”下创建一个目录命名为WaitPublishWeb。

则将本机d:\MyWeb目录中的网站文件拷贝到服务器上D:\待发布网站文件\WaitPublishWeb中。fis-conf文件也拷贝到D:\待发布网站文件\WaitPublishWeb中。

1. 按照文档《fis3发布.net到iis上乱码》配置fis3源代码，不对webconfig做配置，webconfig的配置在源代码中已做好。

操作步骤：

1：cmd 输入：npm root -g 定位到文件夹下 lib\util.js 中

注释

if (buffer.charCodeAt(0) === 0xFEFF)

{

buffer = buffer.substring(1);

}

2：打开iis “.NET 全球化”-编码-文件-gb2312 改为UTF-8

4.运行cmd命令，进入"D:\待发布网站文件\WaitPublishWeb"目录，运行发布命令,命令格式为fis3 release -d D:\output

命令中的D:\output修改为发布目标网站目录，如201环境中的发布目标网站目录为E:\WebSite\Eplus365。则命令为fis3 release -d E:\WebSite\Eplus365.

成功了！