纯前端版本号策略

近日在做的一个全静态项目,没有任何服务器逻辑,所以版本号策略也采用了纯前端的解决方案.

说实在话,其实都是被逼的,我只要修改一下服务器配置加简单的逻辑判断就可以了,但是后端工程师懒的搞,觉着巨复杂.

说到版本号,其实涉及到版本号有三个问题要考虑:版本发布问题 缓存和版本回滚问题 切换开发和维护环境的问题

其实方案很简单,类似于svn的版本策略,也就是如果有任何文件修改的话,都会更新一个版本号

具体如下:

1 主html不缓存,加载资源的文件不缓存
2 涉及到版本号的资源加载放在单独的文件中
3 app内部的静态文件(js,css涉及到版本号策略),针对图片需要自己独立判断

 

说起来很复杂,但是用起来比较简单.这其中唯一用到的一个技术就是SSI(Server-Side Include).

具体分为下面2个步骤

第一步:修改加载资源的代码

示例如下:
index.html

 1 <!DOCTYPE HTML>
 2 <html lang=”en”>
 3 <head>
 4 <meta charset=”UTF-8″>
 5 <title>test</title>
 6 </head>
 7 <body>
 8 <!–#include file=”loadStaticFiles.inc” –>
 9 </body>
10 </html>

loadStaticFiles.inc

1 <script type=”text/javascript”>
2 var __version = “_dev”;
3 var loadStaticFilesStr = [ '<script src="'+__version+'/js/ga.js" type="text/javascript"><\/script>','<script src="'+__version+'/js/test.js" type="text/javascript"><\/script>','<!-- version:'+__version+' -->'].join(“”);
4 
5 document.write(loadStaticFilesStr);
6 </script>

也就是说在版本控制下的文件全部在一个__version名字的文件夹下
每次修改的时候都会有一个新的文件夹建立,之前的那个文件夹就可以删除掉了

第二步: 开启服务器的ssi

 

如果按照上面的做了,你会发现,没有达到你想要的效果.include的代码直接作为注释了.
所以这一步就是要让服务器支持SSI

nginx的开启方式非常简单:

1 location / {
2     autoindex on;
3     ssi on;
4     root   F:/workspace/;
5     index  index.html index.htm;
6 }

样就保证你的include能被服务器返回,如果报路径错误,调整路径就可以了

OK,到这,基本的版本控制就解决了
你在本地开发的时候,修改本地的__version变量就可以,发布的时候也是修改此变量

我的目录结构
 
还需要额外注意的问题:
1 客户端缓存问题.这个不需要担心,和你之前的缓存策略保持一致
2 安全问题,需要禁用执行程序权限

转载于:https://www.cnblogs.com/Reany/p/3168960.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值