fis入门-单文件编译之文件优化（optimize）

FIS(Front-end Integrated Solution )，是百度的前端集成解决方案。最近几天在研究前端构建的东西，就顺便了解了下，果断各种高大上，可以到FIS官网围观感受一下。如果对fis还不熟悉的童鞋，可以跑下官网的小demo体验一下。

好了，这篇文章不是fis的科普文，官方文档已经挺详细了。这里主要讲下FIS单文件编译的优化（optimize）环节。

FIS单文件编译-optimize

FIS详细运行原理这里不展开，有兴趣的可以看下官方文档。我们只是简单地看下单文件编译的其中一个环节：optimize（文件优化）。从optimize这个单词就大致可以猜到是做什么的，比如js、css、图片文件的压缩等。（下图为FIS官方配图）

FIS optimize原理

那么FIS是如何做到这一点的呢？

其实很简单。拿官网的demo来说，假设我们在运行 fis release 的时候加上 --optimize 参数，那么所有的css、js、图片文件都会被优化（文件压缩）。

FIS的系列插件中，以fis-optimizer 开头的插件都是用来完成文件优化这一任务的，比如 fis-optimizer-uglifiy-js、fis-optimizer-clean-css 等。因为FIS已经默认内置并配置好了 fis-optimizer-uglifiy-js、fis-optimizer-clean-css等插件，所以运行时检测到 --optimizer 参数时，就会调用相应的插件，完成对js、css、图片文件的优化。

fis release -d output --optimize

 

内窥optimizer插件——以fis-optimizer-uglify-js为例

在前端构建中，js文件的压缩绝对是非常重要的一环。在FIS内置插件中，js文件压缩这个重任是由fis-optimizer-uglify-js来完成的。那么，我们就来看看它的源码，千万不要吓到。

相信各位看官的第一反应跟我差不多，都是大喊一声what the fuck，竟然只有这么几行代码。当然，这里并没有任意贬低的色彩，而是由衷地赞叹，这插件实现得相当精妙（由fis的架构设计决定的）。

/*
 * fis
 * http://fis.baidu.com/
 */

'use strict';

var UglifyJS = require('uglify-js');

module.exports = function(content, file, conf){
    conf.fromString = true;
    return UglifyJS.minify(content, conf).code;
};

 

站在巨人的肩膀上——自定义js文件压缩插件

小标题起得有点标题党啦，之所以会写这篇文章，是因为想要了解FIS插件的配置、自定义，在官方文档间绕来绕去才找到了一点门路，觉得有必要备忘一下。

FIS默认的js压缩插件用的是fis-optimizer-uglify-js，如果我们想用自己定义的插件，比如 fis-optimizer-test 呢？（请原谅我随便起了个名字）。很简单，首先改下项目配置（fis-conf.js），指定js压缩采用 fis-optimizer-test这个插件。

fis.config.merge({
    modules : {
        optimizer : {
            //js后缀文件会经过fis-optimizer-test插件的压缩优化
            js : 'test'
        }
    }
});

插件指定好了，那这个插件从哪来呢？原谅我又偷懒了，只是在 fis-optimizer-uglify-js插件 的同级目录下，将 fis-optimier-uglify-js 这个目录复制了一遍，然后将index.js的内容改成下面这样子。（项目实战中真有这样的插件就逆天了。。。）

/*
 * fis
 * http://fis.baidu.com/
 */

'use strict';


module.exports = function(content, file, conf){
    return content+'\nvar nick ="程序猿小卡"';
};

再次运行之前的构建命令

fis release -d output --optimize

看看被压缩后的demo.js，就可以看到区别了。堪称史上最逆天的js代码压缩工具，无任何代码优化功能，还乱插代码。。。

console.log('inline file');

function hello(argument) {
    var nick = 'casper';
    var age = 26;
}
var nick ="casper"

写在后面

FISd的官方文档算是比较详细，设计细节的描述也不少，所以本文就不打算成体系地从头到尾把FIS的设计原理讲一遍了，仅仅是挑一些小点出来备忘而已。

ps：前文的插图来自FIS的官方wiki，不算盗图吧~~如果涉及盗图还请提醒下~~