F.I.S初探(前端工程化)

一、初识FIS

在做项目中遇到了静态资源浏览器缓存更新的问题,于是在网络上寻找解决方案。之前虽然没有解决过这个问题,但方法无非就是为其设定新URI使得浏览器强制更新。这个过程听起来还是相当简单的。

也是无意中搜索到了知乎上的一个帖子大公司里怎样开发和部署前端代码?

看到这个文章中提到了FIS,跟随着文章开始学习走起,有点小兴奋,只不过很快便发现问题更多。

二、尝试

原本只是想着有个工具可以将前端资源打个标识,这样就可以轻松的解决浏览器静态缓存更新问题。FIS的描述也确实如此,那么就开始动手搞起吧。

安装

FIS是基于Nodejs开发,所以nodejs必须有。装起。。

然后通过npm命令装起, npm install -g fis。结果卡死了。

由于是第一次接触,所以在baidu上找了半天也没找到方案。放弃。。。

发现了官方视频教程,于是花时间看了几集,大概了解到FIS这个工具还是挺简单的。而且解决了前端开发的问题:

1、资源压缩

2、md5戳

3、资源合并

貌似比较有用的功能就这几个。而我最关心的就是md5戳咯。。

md5戳

所谓Md5戳就是这样的:

<script src="/script/placeholder.js"></script>

加戳后是这样的:

<script src="/script/placeholder_88025f0.js"></script>

当然文件本身名称也变了:script/placeholder_88025f0.js

这样一来解决了两个问题:

1、引用静态资源的URI变了,那么自然浏览器会取新的资源,解决了更新缓存的问题

2、md5是通过文件计算得来,所以只有文件发生变化了才会产生新的URI,反之就不用变了,这就解决了增量更新的问题,同时兼顾了流量功击

当然对于我这种小项目来说第2点几乎没啥用。

再尝试安装

既然知道了好处,那就继续装吧,打开fis官方网站:http://fis.baidu.com,这里面有入门教程,这点毕竟百度团队公开的帮助还是相当可以的。而且是中文滴,好有亲近感。。找了原因可能是npm网站动不动会被墙导致的。。那么,官方也有方案,使用镜像:

npm install some-npm-module -g --registry=国内镜像 --disturl=https://npm.taobao.org/dist

这些东西官方网站都有提到,就不多说啦。出门左转去这里:https://github.com/fex-team/fis/issues/65

这次好了,安装好了,fis -v

三、遇到问题

装好了后那就开始在项目中用吧,这才发现自己太年轻。。。。。。

1、配置

直接使用fis release -md ../output,好了开始生成与发布。结果完蛋了,不管阿猫阿狗全部js/css/imgs都添加了md5戳。这可就麻烦了,完全不是自己想要的,也就是说直接通过一个工具一键解决加Md5戳的问题太理想了。

那么只好去研究官方的文档,了解具体的配置方式。在FIS中都是通过fis-conf.js这个文件来进行配置。官方例子:

// 设置图片合并的最小间隔 fis.config.set('settings.spriter.csssprites.margin', 20);   // 取消下面的注释开启simple插件,注意需要先进行插件安装 npm install -g fis-postpackager-simple  fis.config.set('modules.postpackager', 'simple');   // 取消下面的注释设置打包规则  fis.config.set('pack', {      '/pkg/lib.js': [          'js/lib/jquery.js',          'js/lib/underscore.js',          'js/lib/backbone.js',          'js/lib/backbone.localStorage.js',      ],      // 取消下面的注释设置CSS打包规则,CSS打包的同时会进行图片合并       '/pkg/aio.css': '**.css'  });   // 取消下面的注释可以开启simple对零散资源的自动合并  fis.config.set('settings.postpackager.simple.autoCombine', true);

fis.config.merge({     roadmap : {         path : [             {                 //所有widget目录下的js文件                 reg : 'widget/**.js',                 //是模块化的js文件(标记为这种值的文件,会进行amd或者闭包包装)                 isMod : true,                 //默认依赖lib.js                 requires : [ 'lib.js' ],                 //向产出的map.json文件里附加一些信息                 extras : { say : '123' },                 //编译后产出到 /static/widget/xxx 目录下                 release : '/static$&'             },             {                 //所有的js文件                 reg : '**.js',                 //发布到/static/js/xxx目录下                 release : '/static/js$&'             },             {                 //所有的ico文件                 reg : '**.ico',                 //发布的时候即使加了--md5参数也不要生成带md5戳的文件                 useHash : false,                 //发布到/static/xxx目录下                 release : '/static$&'             },             {                 //所有image目录下的.png,.gif文件                 reg : /^\/images\/(.*\.(?:png|gif))/i,                 //访问这些图片的url是 '/m/xxxx?log_id=123'                 url : '/m/$1?log_id=123',                 //发布到/static/pic/xxx目录下                 release : '/static/pic/$1'             },             {                 //所有template目录下的.php文件                 reg : /^\/template\/(.*\.php)/i,                 //是类html文件,会进行html语言能力扩展                 isHtmlLike : true,                 //发布为gbk编码文件                 charset : 'gbk',                 //发布到/php/template/xxx目录下                 release : '/php/template/$1'             },             {                 //前面规则未匹配到的其他文件                 reg : /.*/,                 //编译的时候不要产出了                 release : false             }         ]     } });

2、资源定位

所谓资源定位,就是在html/js/css中定位到资源引用,将FIS编绎(生成)过的新资源替换进去。那么其实挺简单的,就像本文最开始说的例子:

<script src="/script/placeholder.js"></script>

加戳后是这样的:

<script src="/script/placeholder_88025f0.js"></script>

这样每次发布都是自动完成了资源更新,有点小爽。。只不过问题来了。。。FIS目前替换后的URI是绝对路径。这句话什么意思?

比如,一个css代码:

.h_login-conimgbg{background:transparent url('img/lgoin_image.png') no-repeat; height:406px;}

其中引用了img/lgoin_image.png这个图片。但是经过FIS编绎后是什么样:

.h_login-conimgbg{background:transparent url('/css/img/lgoin_image_369f159.png') no-repeat; height:406px;}

FIS直接将绝对路径进行的替换,这就带来了一个问题,原先是相对目录,换成绝对目录后就变成了根目录了。会有啥问题呢?

如果使用了二级目录就会出现问题,比如系统部署在tomcat的webapps下的myweb目录中,访问时:http://localhost:8080/myweb。那么上面css定位资源时是http://localhost:8080/myweb/css/img/lgon_image.png。

可是FIS编绎后就会这样:http://localhost:8080/css/img/lgon_image_369f159.png。这样就无法访问了。于是我在FIS的讨论区咨询了这个问题,给的回复是:

现在全部是绝对路径,主要是考虑到资源合并和 cdn 部署的功能实现

这么一来就只能通过其他的方式解决,比如,roadmap里可以配置资源的url生成时添加domain,这个方法原本是用来做cdn部署时使用的。但是也可以解决上面的问题。

3、不想处理的文件

在系统里使用了许多第三方资源,如jquery、jqueryUi等库,但这些库我们基本不会去修改代码,也就不存在那些静态资源压缩、添加md5的问题了。那当然就不想在FIS里处理这些文件,而FIS是默认处理所有的js/css/imgs。这也就涉及到了配置的问题。

fis.config.merge({
    roadmap : {
  path : [
   {
                //plugin的js文件
                reg : /^\/plugin\/(.*\.(?:js|css))/i,
                useHash : false,
                useCompile : false,
                url : '${appServer}$&',
            }
        ]
    }
});

这是我截取的一个配置片段,通过reg来定位具体的目录

  • useHash:false,表示不添加md5戳
  • useCompile:false,表示不对资源进行编绎处理

好了,有了这个配置,plugin下的js/css就不会被处理了。

四、阶段感受

其实到最后我已经放弃了,因为项目会用到jenkins hudson做集成,这里面还有许多的部署问题,时间关系就不愿意再深入了。原本想的用个工具加个md5戳或者版本号的想法破灭了。

但是收获还是有的:

1、前端的工程化原来可以有这么出格的思路,其实并没有什么特别大的进步,只不过是看起来很叼的样子。而且FIS感觉是起步阶段,对于开发相对较为规范的项目确实是可以考虑的一个辅助工具

2、真正让我觉得有意思的地方是前端模块化。这部分是FIS里的进阶,真正的前端工程其实是这部分。我在前端方面的经验太少了,仅仅是初步水平,所以这部分高级内容需要花时间学习和实践

3、无论产前端还是后端都是程序员,都是工程师。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏F-Stack的专栏

F-Stack Q&A 第三期

Q1:如果在一个阻塞型的socket上执行recv,会不会把相应的线程卡死,调用recv时该socket中没有数据包,导致sleep,sleep导致该线程没办法...

6789
来自专栏hotqin888的专栏

EngineerCMS工程师知识管理系统支持项目模板

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

1483
来自专栏221-B

逆向从 Instruments 中获取 GPU 数据

背景: RTMP SDK需要获取硬编硬解时候的GPU数据,第一时间想起了TraceParser, 但是TraceParser不支持GPU Driver模板. ...

2421
来自专栏BestSDK

一个“爆款”成功的API,都离不开这8条设计准则

我已经看过很多API设计相关的文章和优秀的REST API设计教程。他们通常讨论的是适当的编码技巧和如何在给定的语言中暴露接口。尽管那些是很有用也是很需要的,但...

3867
来自专栏用户画像

IDEA Facets与Artifacts

Facets表述了在Module中使用的各种各样的框架、技术和语言。这些Facets让Intellij IDEA知道怎么对待module内容,并保证与相应的框架...

3341
来自专栏技术小黑屋

快速提高Android开发效率的Web工具

在Google的广大支持下,便捷开发Android程序的Native工具层出不穷。其实Android开发涉及到的范围也不小,一些Web工具有时候也会带来事半功倍...

1582
来自专栏做全栈攻城狮

零基础开发高大上精美网站,一步步带你建设全能网站

不管你水平如何,请你仔细看下去。因为这份技能你值得拥有。网站建设完毕之后,下一系列讲解如何建设公众号。一起带你飞。

2401
来自专栏Android开发经验

让你的App有声音

1182
来自专栏代码GG之家

只需一个命令,快速定位android的启动耗时

有兴趣合作,帮忙制作公众号的一些宣传图册的伙伴,可以加我微信,商谈具体事宜。 回顾: Android 启动过程框架 这节我们讲一个命令,用来定位android...

2076
来自专栏七夜安全博客

go go go - beego

在上一篇文章What!!! so fast中,我介绍了golang这种语言,并使用golang开发了一个端口扫描工具。现在我的主要工作是做网络安全方面的开发与策...

3432

扫码关注云+社区

领取腾讯云代金券