zoukankan      html  css  js  c++  java
  • 配置 FIS 来适配 go revel 框架以优化前端缓存策略

    对于前端工程师来说,浏览器缓存优化是个永远的话题。前几天看了知乎上的一个问答:《大公司里怎样开发和部署前端代码?》,深以为然,所以决心使用 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 来优化前端代码就告一段落了。

  • 相关阅读:
    提高你的Java代码质量吧:使用构造函数协助描述枚举项
    Python文件或目录操作的常用函数
    汉语-词语:胸怀
    汉语-词语:胸襟
    汉语-词语:谋略
    汉语-词语:气量
    植物-常见树木:刺槐
    植物-常见树木:楝
    HDU 2255 奔小康赚大钱 KM算法题解
    Dozer--第三方复制工具,哎哟,还不错!
  • 原文地址:https://www.cnblogs.com/shanpow/p/4127624.html
Copyright © 2011-2022 走看看