fis3 使用心得

因為專案原因，公司的框架選擇是fis3,因此我就接觸了下fis3這個東西。樓主沒用過webpack,gulp和grunt也不熟，fis3做為自己第乙個使用的打包工具，感覺真tm好用。本文主要就介紹一下對於fis3的使用心得（非常非常淺顯，僅限於個人粗淺理解，偏近應用。入門可以，深入不一定好）

啥是fis3呢?官方介紹如下：

解決前端工程中效能優化、資源載入（非同步、同步、按需、預載入、依賴管理、合併、內嵌）、模組化開發、自動化工具、開發規範、**部署等問題

1.常用的引數

引數名

意義哪一步

-p啟服務的埠號

fis3啟服務時

-w監聽

比如release時監聽更改

-d宣告發布路徑名

發布到當前命令執行目錄下

-l瀏覽器自動重新整理

一般-wl這樣使用

它還可以發布到遠端測試機那樣，區域網裡有接收指令碼，就可以直接發布。十分方便。

2.思想

大牛研發fis時說，他們多年經驗，前端開發需要的編譯能力只有三種：資源定位、內容嵌入、依賴宣告。fis3裡只需要簡單的配置，而其配置項都是根據這三種能力來的設計的。

(1) 資源定位比較好理解：就是比如用的資源，生成了一張索引表之類的玩意，去那裡面找對應資源,發布的時候很多加md5撮的。所以如果用這個功能，靠js**去獲取定位的資源，容易gg。（它的好處也很明顯：定位資源能力，可以有效地分離開發路徑與部署路徑之間的關係，工程師不再關心資源部署到線上之後去了**，變成了什麼名字，這些都可以通過配置來指定。）

(2)內容嵌入：

為使用人提供諸如base64嵌入css,js裡，前端編譯模板編譯到js裡，將js、css、html合併成乙個的能力。這個能有效減少http請求。

同時個人使用經驗裡，最後編譯成乙個元件或者頁面的js,css，html編譯成乙個js，也更進符合元件化開發思路。

（用法在html中可以嵌入其他檔案內容或者base64編碼值，可以在資源定位的基礎上，給資源加 ?__inline 引數來標記資源嵌入需求。常見的比如說往檔案插入base64,往html中插入js/css/html等等。）

補充說明下關於base64嵌入問題，開發的時候，靜態資源是放png還是png,gif仍舊是gif.然後在**快裡引入這個資源，在資源後加上__inline這個標示。其實不加也可以正常跑**。（就是傳統的請求資源那樣）加上後，在編譯時，會把gif或者png檔案轉成base64直接插入**。

那麼為什麼要多次一舉呢？

主要是轉成了base64後可以少請求一次資源！請求多個資源的確會影響移動端效能，所以我們可以轉base64,利用現在硬體好的優勢，base64解碼快，來降低網路請求，達到**優化的目的~

(3)依賴宣告

官方給出的解釋如下

宣告依賴能力為工程師提供了宣告依賴關係的編譯介面。

fis3 在執行編譯的過程中，會掃瞄這些編譯標記，從而建立一張靜態資源關係表，資源關係表詳細記錄了專案內的靜態資源id、發布後的線上路徑、資源型別以及依賴關係和資源打包等資訊。使用 fis3 作為編譯工具的專案，可以將這張表提交給後端或者前端框架去執行時，根據元件使用情況來按需載入資源或者資源所在的包，從而提公升前端頁面執行效能。

3.配置

根據我個人理解，整個fis3工程構建就是首先編譯你的**（處理資源定位啊等等問題），然後將你的**發布到內建的伺服器上（若未發布遠端rd就是自己除錯的機子）。然後你開啟發布上去的入口檔案（也可以通過配置直接把入口檔案定為這一頁），點開直接就能用了。這中間涉及的點都可以通過配置檔案fis-conf.js來配置。

比如說我用到了es6的語法，這個有可能造成不相容。我可以在編譯時候用babel外掛程式處理這個問題。（舉例**如下）

fis.match('src/**.vue:js', ),
]});

編譯問題都在此處解決。然後就是發布問題，比如發布時加md5撮，再比如發布的位址等等，都是用release關鍵字。

暫時就這麼多，隨著以後使用fis3有更進一步體會我再更新這個。

fis3 使用心得

fis2 入門 fis3使用

FIS3的簡單使用

FIS3工作原理

fis3 使用心得

fis2 入門 fis3使用

FIS3的簡單使用

FIS3工作原理

相關推薦