配置 FIS 來適配 go revel 框架以優化前端緩存策略

對於前端工程師來講,瀏覽器緩存優化是個永遠的話題。前幾天看了知乎上的一個問答:《大公司裏怎樣開發和部署前端代碼?》,深覺得然,因此決心使用 FIS 來優化自身的前端文件。javascript

咱們的項目使用了 go 語言的 revel 作 web 框架。這個框架的目錄結構混合了先後端的文件,無法作到先後端開發的徹底分離。因此咱們要作的第一步,就是分離先後端的文件。css

分離先後端

由於已經決定使用 FIS 來優化前端,因此特別利用了 FIS 的編譯文件這個功能。既然無法作到徹底的先後端分離,至少也要分離一部分吧。html

首先把 app/views/ 以及 public/ 這兩個文件夾移動到 revel 目錄以外,假設咱們的工程文件都保存在 server/ 下,咱們在 server/ 的同級建立另一個目錄 web/,因此項目文件的結構大概是這樣的:前端

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

而後在 web/ 下新建一個 fis-conf.js 文件,內容以下:java

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

此時若是咱們運行命令 fis release -md local 就會發現,web/ 下的文件都按照目錄結構保存到了 server/ 下,這樣,咱們就能夠在 web/ 下專一的寫前端代碼,而不用理會 server/ 下的後端代碼了。若是用了 fis -w 的話更是全自動了。web

資源從新定位

HTML 文件

以前因爲要區分服務器環境和本地開發環境,因此在 html 中大量使用了 .RunMode 來判斷部署環境,例如:npm

<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 來優化前端代碼就告一段落了。

相關文章
相關標籤/搜索