对于前端工程师来说,浏览器缓存优化是个永远的话题。前几天看了知乎上的一个问答:《大公司里怎样开发和部署前端代码?》,深以为然,所以决心使用 FIS 来优化自身的前端文件。

我们的项目使用了 go 语言的 revel 做 web 框架。这个框架的目录结构混合了前后端的文件,没法做到前后端开发的完全分离。所以我们要做的第一步,就是分离前后端的文件。

分离前后端

因为已经决定使用 FIS 来优化前端,所以特别利用了 FIS 的编译文件这个功能。既然没法做到完全的前后端分离,至少也要分离一部分吧。

首先把 app/views/ 以及 public/ 这两个文件夹移动到 revel 目录之外,假设我们的工程文件都保存在 server/ 下,我们在 server/ 的同级创建另外一个目录 web/,所以项目文件的结构大概是这样的:

	├─┬ server
│ ├── app
│ ├── ...
│ └── tests
└─┬ web
├─┬ app
| └── views
└── public

然后在 web/ 下新建一个 fis-conf.js 文件,内容如下:

	fis.config.merge({
deploy : {
local : {
to : '../server'
}
}
});

此时如果我们运行命令 fis release -md local 就会发现,web/ 下的文件都按照目录结构保存到了 server/ 下,这样,我们就可以在 web/ 下专注的写前端代码,而不用理会 server/ 下的后端代码了。如果用了 fis -w 的话更是全自动了。

资源重新定位

HTML 文件

之前由于要区分服务器环境和本地开发环境,所以在 html 中大量使用了 .RunMode 来判断部署环境,例如:

	<img src="{{if eq .RunMode "prod"}}http://cdn.example.com{{end}}/img/image.png">

现在使用 FIS 以后,这样的写法并不被支持,而且也没有必要这样写。因为 FIS 会自动在打包的时候插入 cdn 域名,开发的时候完全不需要考虑。所以首先就是要把所有这种资源定位全部修改成指向本地资源。

CSS 文件

另外一个会引用静态资源的就是 css 了。由于 css 没有条件判断之类,所以之前都是在上传的时候手动修改资源文件的引用地址,文件一多,相当痛苦。用了 FIS ,这部分工作完全可以变成全自动替换修改,妈妈再也不用担心我漏掉几个文件没改了呢。只要把所有的资源定位改成指向本地资源的即可。

JavaScript 文件

同样的,js 文件里的资源定位也需要修改。之前通过 runMode 判断的,现在通通不需要了。不过跟 html 和 css 不同的是,js 里需要特别的提示符。

之前引用资源像这样:

	var img = "/path/to/image.png";

现在要改成这样:

	var img = __uri("/path/to/image.png");

否则 FIS 同样是不识别的,也就不会自动替换了。

预编译语言的支持

项目开发的时候,我们使用了 LESS 和 CoffeeScript 这两种预编译语言来加速开发。之前都是用 sublime text 的插件在保存文件的时候自动编译到指定目录。使用 FIS 后,这部分工作也可以交给 FIS 来做。尤其像 CoffeeScript,插件不支持编译的时候保持目录结构,相当痛苦。

首先我们要安装几个编译器。

	npm install -g fis-parser-less fis-parser-coffee-script

然后在项目根目录下的 fis-conf.js 中添加代码,让它看起来像这样:

	fis.config.merge({
modules : {
parser : {
coffee : 'coffee-script',
less : ['less']
}
},
roadmap : {
ext : {
less : 'css',
coffee : 'js'
}
},
deploy : {
local : {
to : '../server'
}
}
});

这样,我们就可以专注的写 coffee-script 和 less,而不用管编译什么的了,也不必捆绑在一个编辑器上了。


至此,这次使用 FIS 来优化前端代码就告一段落了。

配置 FIS 来适配 go revel 框架以优化前端缓存策略的更多相关文章

  1. Hibernate框架(四)缓存策略+lazy

    Hibernate作为和数据库数据打交道的框架,自然会设计到操作数据的效率问题,而对于一些频繁操作的数据,缓存策略就是提高其性能一种重要手段,而Hibernate框架是支持缓存的,而且支持一级和二级两 ...

  2. Windows7下安装golang语言开发环境和revel框架

    1.下载先去下载32位或64 golang window 安装包 并安装下载地址:https://www.golangtc.com/download 本人更改了安装地址为 D:\GO\Go 2. go ...

  3. bootstrap table--面相配置、hook、适配的表格框架

    bootstrap table--面相配置.hook.适配的表格框架

  4. Go语言实战 - revel框架教程之MongDB的最佳搭档revmgo

    由于revel框架本身对于model层的编写没有提供任何指导,所以在设计这部分的时候就有些犹豫,反复斟酌到底怎样才算是最佳实践. 我在做山坡网的时候刚开始也纠结了一下,拿不准mongodb的sessi ...

  5. Go语言Revel框架 环境搭建

    1.首先参考连个链接 http://blog.csdn.net/creak_phone/article/details/12620969 http://www.geek521.com/?p=616 2 ...

  6. revel框架教程之缓存和Job

    Go语言实战 - revel框架教程之缓存和Job   所有的网站应该都会有一个非常简单的需求,首页一秒之内打开. 满足的方式主要有两种: 页面静态化,效果最好,对服务器基本没负担,只要带宽足够就好了 ...

  7. Go语言实战 - revel框架教程之权限控制

    一个站点上面最基本都会有三种用户角色,未登录用户.已登录用户和管理员.这一次我们就来看看在revel框架下如何进行权限控制. 因为revel是MVC结构的,每一个url其实都会映射到一个具体的Cont ...

  8. 【腾讯Bugly干货分享】QQ电话适配iOS10 Callkit框架

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/58009392302e4725036142fc Dev Club 是一个交流移动 ...

  9. revel框架教程之CSRF(跨站请求伪造)保护

    revel框架教程之CSRF(跨站请求伪造)保护 CSRF是什么?请看这篇博文“浅谈CSRF攻击方式”,说的非常清楚. 现在做网站敢不防CSRF的我猜只有两种情况,一是没什么人访问,二是局域网应用.山 ...

随机推荐

  1. 《R语言实战》读书笔记--第三章 图形初阶(二)

    3.4添加文本.自定义坐标轴和图例 很多作图函数可以设置坐标轴和文本标注.比如标题.副标题.坐标轴标签.坐标轴范围等.需要注意的是并不是所有的绘图函数都有上述的参数,需要进行验证.可以将一些默认的参数 ...

  2. C++vector使用

    标准库Vector类型使用需要的头文件:#include <vector>Vector:Vector 是一个类模板.不是一种数据类型. Vector<int>是一种数据类型. ...

  3. js判断变量类型,类型转换,

    1.typeof 操作符 主要检测基础数据类型 var a="zhangqian"; var b=true; ; var d; var e=null; var f=new Obje ...

  4. 行为型设计模式之备忘录模式(Memento)

    结构 意图 在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到原先保存的状态. 适用性 必须保存一个对象在某一个时刻的(部分)状态, 这样以后需要时 ...

  5. KnockJs 绑定语法

    按照汤姆大叔的教程,学习了KnockJs相关知识,练习一下KnockoutJs的绑定语法. 相关的教程大家可以去看 汤姆大叔的博客. 练习代码下载 由于没有环境,代码直接用记事本写的,可能比较乱,仅作 ...

  6. Oracle clob 操作

    --Oracle clob 操作 -- Created on 2015/4/8 by TianPing declare -- Local variables here v_clob1 Clob; v_ ...

  7. Appium+python自动化13-native和webview切换【转载】

    前言 现在大部分app都是混合式的native+webview,对应native上的元素通过uiautomatorviewer很容易定位到,webview上的元素就无法识别了. 一.识别webview ...

  8. springBoot Ribbon Hystrix

    1.依赖包引入 <!-- 引入关于 hystrix的依赖 --> <dependency> <groupId>org.springframework.cloud&l ...

  9. 开发框架 springBoot

    1.多个环境的配置文件 在application.yml 中配置需要调用的配置文件 spring: profiles: active: dev 运行方式的,先运行application.yml 再根据 ...

  10. HDU 3466 Proud Merchants【贪心 + 01背包】

    Recently, iSea went to an ancient country. For such a long time, it was the most wealthy and powerfu ...