fis入门-单文件编译之文件优化(optimize)

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

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

FIS单文件编译-optimize

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

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,不算盗图吧~~如果涉及盗图还请提醒下~~

posted @ 2014-03-03 23:40  程序猿小卡  阅读(2105)  评论(0编辑  收藏