关于web性能的思考与分享［09］-fis3构建工具-语法教程(1)之资源嵌入

开发fis的这个团队，经过艰辛的探索之后发现，前端开发所需的编译能力只有3种：

1、内容嵌入：把一个文件的内容（文本）或者base64编码图片嵌入到另一个文件中；
2、资源定位：获取任何开发中所使用资源的线上路径；
3、依赖声明：在一个文本文件内标记对其他资源的依赖关系；

于是，为了解决这3项功能，fis团队开发出了内置的语法对其进行操作。

内置语法主要针对的是html\css\js等三种语言提供的编译语法。

嵌入资源——内容嵌入

例如，

 1、将base64图片嵌入到css\js里；

 2、前端模板编译到js文件中；
 3、将js\css\html拆分成几个文件最后合并到一起的能力...等等。

有了这项能力，在减少http请求数方面将大大提升。

需要注意的是，在组件化开发方面，fis是不建议使用“资源嵌入”的方式作为组件化拆分的手段，后面讲到的“声明依赖”能力会更适合组件化开发。

（1）在html中嵌入资源

前提：在html中嵌入其他文件内容或者base64编码值，可以在资源定位的基础上，给资源加上“?_inline”参数来标记资源嵌入需求。

关键词: ?_inline

例如：在html中嵌入base64图片

编译前，针对logo这张图进行处理：
<img src="img/logo.png?_inline" />

编译后：
<img src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>

例如：在html中嵌入样式文件

编译前，对外联样式style.css处理如下：

<link rel="stylesheet" type="text/css" href="style.css?_inlne">

编译后，在html中之间就将外联样式style.css的内容嵌入了内联样式,从而减少请求数：

<style>img {border:5px  solid #ccc}</style>

例如：在html中嵌入脚本资源

编译前，针对外联脚本文件app.js做如下处理：

<script type="text/javascript" src="app.js?_inline" /></script>

编译后，将外联脚本文件app.js中的内容嵌入到html中作为内联脚本:

<script type="text/javascript">
console.log('我是内联app.js');
</script>

例如，在Html中嵌入页面(html)文件：

编译前，在html的<div id="div1"></div>标签中插入：
<link rel="import" href="demo.html?_inlne">

编译后，在<div id="div1"></div>中将插入demo.html的内容：

<div id="div1">
我是demo.html的内容
</div>

前面讲了如何在html中嵌入资源。别急，fis3还有一个强大的功能——在js中嵌入资源。

（2）在js中嵌入资源

前提：__inline()函数，注意是2条短下划线。该函数可以陷入图片的base64编码、嵌入其他js 或者前端模板文件的编译内容。

当然，该函数对html中的< script>标签里的内容同样是有用的。

例如：在js中嵌入js文件：

编译前，在app.js文件中写入如下：
__inline('demo.js');

编译后，在app.js文件中将有demo.js的内容：

console.log('我是demo.js中的内容');
//假设demo.js中内容为console.log('我是demo.js中的内容')

例如，在js中嵌入base64图片

编译前，js文件中写入如下：

var img=__inline('img/logo.png');

编译后，原先那串代码被替换成base64位的图片：

var img='data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7';

当然，你还可在js中嵌入其他文本文件，例如css文件：

编译前，js文件有代码如下：

var css=__inline('a.css');

编译后，js文件中那串代码变成了：

var css="body \n{color:red;\n}";
//假设a.css的内容如下：
body{
    color:red;
}

除了之外，fis3还提供在css文件只能怪嵌入资源。

（3）在CSS中嵌入资源

与html中嵌入资源类似，通过编译标记?_inline可以嵌入文件内容。
但是，要注意的一点，除了src=”xxx”之外。因为在ie中，src被用在ie支持的滤镜filter内，该属性目前不支持base64字符串。

例如，在a.css文件中嵌入b.css文件的内容：

编译前，在a.css文件中写入：

@import url('b.css?_inline');

编译后，在a.css文件中将嵌入如下内容那个：

a {border:1px solid #ccc};

//这里我们假设b.css的内容为：
a{
    border:1px solid #ccc;
}       

再例如，在css中嵌入base64图片

编译前，在a.css文件中写入：

.div1 {
    background:url(img/logo.png?__inline);
}
编译后，a.css中这串css代码将变为：

.div1 {
     background: url(data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7);
}   

小结:

关键词：?_inline编译标记——处理html\css内嵌
       __inline()内置函数；——处理js内嵌