fis3初步學習體驗

作為前端開發，或多或少都會接觸很多前端構建工具，最近的業務使用到了百度FIS團隊的fis3，想和大家分享下我所理解的fis3。

使用方法簡單說

首先，你需要安裝node和npm

然后，使用 npm install -g install 命令安裝fis3，安裝完成是這樣的

表示安裝成功。

然后我們可以通過 fis3 release -w 來對代碼進行監聽。

注：fis3默認內置了fis3-command-release插件，提供了文件監聽和瀏覽器自動刷新功能，在release的時候添加-w或-L參數就可以，這樣可以很方便的部署代碼。

當你需要使用插件的時候，可以用 fis3 install -g 插件名 進行安裝。

與其他構件工具一樣，fis3也需要配置fis-conf.js文件。

添加MD5戳以及資源的合并壓縮（配置 useHash: true 即可添加MD5戳）

CssSprite圖片合并

對sass文件進行編譯

這樣我們就可以使用基本的fis3了。

fis三種編譯能力

fis3可以做到以下幾點：

其主要功能基本都是圍繞著前端開發所需要的三種編譯能力：資源定位、內容嵌入、依賴聲明。

1、資源定位

HTML中的資源定位

js中的資源定位

編譯后

css中的資源定位

編譯后

2、內容嵌入

3、依賴聲明

fis3的設計原則是“基于依賴關系表的靜態資源管理系統與模塊化框架設計”，所以我們就從靜態資源管理和模塊化兩方面來理解下fis3。

靜態資源管理

關于性能優化是前端經久不衰的必須思考的問題，一個網站如果想要做到響應快高并發，那其中一個很有效的辦法就是盡量讓網站靜態化。做到動靜分離。我們可以使用CDN技術，將靜態資源保存在CDN上，可以用靜態資源的CDN路徑拉取到資源，減輕服務器的壓力。fis3實現了一套“靜態資源管理系統”，在開發頁面的時候只需要用相對路徑開發，構建后會生成帶有hash靜態資源版本號的文件，避免發布后頁面錯亂。

靜態資源的大小也會影響網絡傳輸效率，fis3也提供了很多插件來對圖片進行合并、對HTML、js、css文件進行合并，fis3會對路徑中帶有 ?__sprite 的圖片進行合并，減少了請求數量。但單純的資源合并是沒有辦法按需加載資源的，然而靜態資源按需加載也是減少資源冗余的很重要的方式。使用fis3會生成靜態資源映射表，是記錄文件依賴等信息的表，雖然不會生成map.json，但當文件包含“__RESOURCE_MAP__”字符，就會用表結構數據替換這里的字符。靜態資源系統可以根據表結構數據中對應對的信息進行加載。這樣就解決了按需加載的問題。

模塊化開發

前端模塊化開發對開發人員來說具有很重要的意義，模塊化可以方便代碼復用，提升可維護性。我們熟悉的模塊化開發有commonjs、AMD、CMD，模塊化框架有mod.js、require.js、sea.js等。

Fis3默認不支持模塊化開發，所以需要fis3-hook-commonjs/fis3-hook-amd/fis3-hook-cmd、fis3-postpackager-loader以及fis3-deploy-wsd-cdn-upload插件的支持。

配置fis-conf.js的流程：

1、使用fis3-postpackager-loader插件分析依賴

2、合并資源

3、將靜態資源發布到CDN

4、文件入口

5、js引用

除了依賴聲明內置語法中資源間相互依賴的語法，fis3還可以解析以下幾種語法。

fis3可以綜合處理各種資源的模塊化，我們不用糾結于JavaScript模塊化或是CSS模塊化等單獨資源的模塊化，這樣就可以提升開發體驗，為性能優化提供良好的支持。這種一體化的模塊化方案的目錄劃分與我們平常按照資源類型劃分不同，其目錄分為modules（子系統），包括common子系統（可為其他資源提供服務的通用模塊）和業務子系統；page，我們實際輸出的內容子系統，包含了各種資源的文件。一般來說，JS組件可以封裝CSS組件的代碼，template模塊可以處理HTML、JavaScript和CSS等各種模塊化資源。

在js中加載模塊

在css中聲明依賴關系

前端模塊化需要將js、CSS和tpl同時都考慮進去，所以相對其他語言來說更加復雜。拿commonJS舉例，commonJS定義的模塊有require（引入外部模塊）、exports（導出當前模塊的方法或變量）以及module（模塊本身），只要能提供module、exports、require和global這四個變量，瀏覽器就能夠加載CommonJS模塊

構建后，文件會自動加上如下代碼

最后

和fis3一樣基于nodejs的構建工具有grunt、gulp等，那么fis3與這些熱門工具對比有哪些區別呢？

就個人感受而言，grunt真的是太慢了，項目越大，構建時間就越慢，大大拖延了開發速度。grunt有三千多個插件可供選擇。

gulp是輕量級的，定制性會更強，想要什么功能就裝什么插件，但現有的插件并不一定能滿足開發需求，所以可能也需要自己寫插件，gulp插件的編寫相對其他工具來說可能更方便。gulp有近七百個插件。gulp學習成本較低，只有五個API。

fis3相對來說并沒有那么輕量，因此可以做的事情會比較多，所以整個項目都可以使用fis3。感覺fis3相比其他工具更著重性能優化方向。fis3現有可用插件有一千多個，基本足夠我們開發使用，如果想要自己開發插件也是非常方便的。總體來說，fis3為前端開發帶來了很多方便。

以下為同一個項目用這三種工具構建的結果：

grunt：

gulp:

fis3:

可見構建輸出時間grunt>fis3>gulp，這只是我做的初步試驗，具體選擇哪種工具進行構建還需要開發人員仔細斟酌。