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

View Code

 

此名为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.

 

成功了！