使用fis優化web站點

1，須要nodejs

2，安裝fis：npm install --g fis

3，安裝打包插件：npm install -g fis-postpackager-simple

4，在站點根目錄下添加fis的配置文件fis-conf.js，並添加如下內容

 1 //Step 1. 取消下面的註釋開啓simple插件，注意須要先進行插件安裝 npm install -g fis-postpackager-simple
 2 fis.config.set('modules.postpackager', 'simple');
 3 
 4 //經過pack設置干預自動合併結果，將公用資源合併成一個文件，更加利於頁面間的共用
 5 
 6 //Step 2. 取消下面的註釋開啓pack人工干預
 7 fis.config.set('pack', {
 8     'pkg/lib.js': [
 9         '/lib/mod.js',
10         '/modules/underscore/**.js',
11         '/modules/backbone/**.js',
12         '/modules/jquery/**.js',
13         '/modules/vendor/**.js',
14         '/modules/common/**.js'
15     ]
16 });
17 
18 //Step 3. 取消下面的註釋能夠開啓simple對零散資源的自動合併
19 fis.config.set('settings.postpackager.simple.autoCombine', true);
20 
21 
22 //Step 4. 取消下面的註釋開啓圖片合併功能
23 fis.config.set('roadmap.path', [{
24     reg: '**.css',
25     useSprite: true
26 }]);
27 fis.config.set('settings.spriter.csssprites.margin', 20);

View Code

5，編譯發佈：fis release -omp

6，啓動站點測試：fis server start --type node

7，查看站點的代碼：fis server open

 

看一下站點發布前的網頁，再看一下編譯發佈後的有什麼區別吧。給你驚喜。

 但願你們儘可能按照這篇規範來開發web站點。按這個簡單規範開發的東西，更適合fis進行最好的優化。