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

刷新一下，添加几个待办项，咱们会发现全部待办项的图片都合并在了一张图片中。