FIS的合併壓縮技術

FIS是專爲解決前端開發中自動化工具、性能優化、模塊化框架、開發規範、代碼部署、開發流程等問題的工具框架。

使用FIS咱們能夠快速的完成各類前端項目的資源壓縮、合併等等各類性能優化工做，同時FIS還提供了大量的開發輔助功能

首先咱們瞭解一下FIS的基本命令

• fis install: 此命令安裝一些公共庫組件好比 jQuery、echarts，咱們提供的組件都放在 https://github.com/fis-components 倉庫中。
• fis release: 命令用於編譯併發布的你的項目，擁有多個參數調整編譯發佈操做。
• fis server: 命令能夠啓動一個本地調試服務器用於預覽fis release產出的項目。

接下來咱們能夠經過快速入門進一步的瞭解FIS。

準備工做

工具安裝

FIS使用Node.js開發，以npm包的形式發佈。所以使用FIS須要先安裝Node.js，再經過npm安裝命令進行FIS安裝。

npm install -g fis

示例準備

在介紹FIS的主要功能前，須要先準備一個示例項目。能夠從Github上獲取。

git clone https://github.com/hefangshi/fis-quickstart-demo.git

本地預覽

首先咱們能夠經過 fis server start 命令啓動FIS的本地調試服務器功能對構建發佈的項目進行預覽調試

fis server start

注意

• 若是8080端口被佔用，能夠經過 fis server start -p [port] 指定新的端口。

• 若是沒有java、php環境，能夠經過 fis server start --type node 啓動Node版fis server。

• 命令執行後內置服務器會一直運行，能夠經過 fis server stop 命令關閉內置服務器。

本地調試服務器啓動成功後，就會自動打開 http://127.0.0.1:8080 ，可是此時服務器內沒有任何內容。咱們還須要經過FIS發佈DEMO項目才能進行預覽

cd fis-quickstart-demo #進入DEMO目錄 fis release #編譯併發布DEMO 

fis release 命令會將編譯後的項目發佈至本地調試服務器，再次刷新瀏覽器頁面，咱們就能夠到fis-quickstart-demo項目的主頁了。

資源壓縮

資源壓縮一直是前端項目優化中很是重要的一環，使用FIS咱們無需任何配置，只須要一個命令就能夠完成壓縮工做。

fis release --optimize

若是以爲參數輸入比較麻煩，實際上也支持參數縮寫。

fis release -o

FIS構建並不會修改源代碼目錄中的內容，而是擁有獨立的產出的目錄，FIS默認的產出目構錄能夠經過 fis server open 打開，你也能夠經過 fis release -d <path/to/output> 指定你但願的輸出目錄，詳情能夠參考FAQ

<path/to/output> 你想輸出到的文件夾路徑，你能夠隨意指定，好比 ./output、../output、D:\output

查看一下網站的靜態資源，咱們會發現腳本、樣式、圖片資源都已經壓縮完成。無需額外的插件和配置編寫，一條命令就完成了壓縮工做

FIS默認會調整全部資源引用的相對路徑爲絕對路徑，若是隻是單純的但願對項目的腳本、樣式、圖片進行壓縮，不但願對資源引用地址作調整，能夠直接使用基於FIS封裝的spt。

添加文件版本

FIS可以根據靜態資源的內容自動生成文件版本，自動更新資源引用路徑，解決緩存更新問題，告別手動更新時間戳。

咱們經過開啓 --md5 參數，爲項目中的靜態資源添加md5版本號

fis release --optimize --md5 # fis release -om 

刷新頁面，咱們能夠看到全部資源均加上了md5版本號

資源合併

設置打包

FIS能夠經過pack來進行資源文件的合併，好比咱們須要將DEMO中的公共庫文件打包在一塊兒，能夠修改 fis-conf.js 配置，加入pack配置

fis.config.set('pack', { '/pkg/lib.js': [ 'js/lib/jquery.js', 'js/lib/underscore.js', 'js/lib/backbone.js', 'js/lib/backbone.localStorage.js', ] }); 

設置完pack後，FIS默認只會進行文件打包，不會對頁面中的靜態資源引用進行替換，咱們能夠經過引入後端靜態資源管理來加載打包模塊。不過也能夠利用fis-postpackager-simple插件，能夠自動將頁面中獨立的資源引用替換爲打包資源。

插件安裝

FIS的編譯系統擁有一個使用簡單、擴展方便的插件體系，這套插件體系保證了FIS編譯工具的靈活性和生命力。這裏咱們簡單介紹一下FIS插件的安裝方法，更加詳細的插件系統介紹能夠查看配置API modules。

插件的安裝分爲兩步，首先咱們須要經過npm包管理工具進行插件安裝

npm install -g fis-postpackager-simple

fis-postpackager-simple插件是提供給純前端應用的打包合併插件，其餘定製解決方案，如fis-plus、yogurt等不須要這個插件，須要查看各自的文檔瞭解使用方式。

插件安裝到本地後，咱們還須要經過項目配置文件開啓插件，修改項目根目錄下的fis-conf.js配置，開啓fis-postpackager-simple插件

cd fis-quickstart-demo vi fis-conf.js #vi是linux下的文本編輯器，windows用戶能夠選用任意文本編輯器對fis-conf.js文件進行編輯。 

//file : fis-conf.js fis.config.set('modules.postpackager', 'simple'); 

應用打包

爲了開發調試時更加方便 fis release 默認不會合並資源，在指定了 --pack 參數後，FIS纔會進行打包合併處理。

fis release --optimize --md5 --pack # fis release -omp 

再次瀏覽咱們能夠發現原有的基礎類庫引用已經被替換爲了 lib.js ，關於fis-postpackager-simple插件更多的靜態資源處理策略和使用方法

自動打包

利用simple插件，咱們還能夠按頁面進行自動合併，將沒有經過pack設置打包的零散資源自動合併起來。

//file : fis-conf.js //開啓autoCombine能夠將零散資源進行自動打包 fis.config.set('settings.postpackager.simple.autoCombine', true); 

再次運行FIS構建項目

fis release -omp

咱們會發現剩餘的零散資源已經被自動合併了。

合併圖片

經過上述幾個步驟，咱們已經成功將腳本資源和樣式表資源進行了合併，可是爲了進一步的減小HTTP鏈接數，咱們還能夠對引用的圖片資源進行進一步的合併。

在FIS中，若是樣式文件中引用圖片時，添加了 ?__sprite query，那麼將樣式文件使用 pack 設置進行合併後，不單單會合並樣式文件，還會將全部標識了合併的圖片進行合併處理。

咱們經過 pack 設置，將全部樣式文件合併爲 aio.css

fis.config.set('pack', { '/pkg/lib.js': [ 'js/lib/jquery.js', 'js/lib/underscore.js', 'js/lib/backbone.js', 'js/lib/backbone.localStorage.js', ], '/pkg/aio.css': '**.css' }); 

再次運行FIS構建項目

fis release -omp

刷新一下，添加幾個待辦項，咱們會發現全部待辦項的圖片都合併在了一張圖片中。