使用fis优化web站点

时间 2019-11-16

标签使用 fis 优化 web 站点栏目 HTML 繁體版

原文原文链接

1，须要nodejscss

2，安装fis：npm install --g fishtml

3，安装打包插件：npm install -g fis-postpackager-simplenode

4，在站点根目录下添加fis的配置文件fis-conf.js，并添加如下内容jquery

 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 -ompweb

6，启动站点测试：fis server start --type nodenpm

7，查看站点的代码：fis server openide

看一下站点发布前的网页，再看一下编译发布后的有什么区别吧。给你惊喜。post

但愿你们尽可能按照这篇规范来开发web站点。按这个简单规范开发的东西，更适合fis进行最好的优化。测试