Fis3版本:v3.4.22
Fis3的三大特性
资源定位:获取任何开发中所使用资源的线上路径
内容嵌入:把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中
依赖声明:在一个文本文件内标记对其他资源的依赖关系
内容嵌入
嵌入资源即内容嵌入,可以为工程师提供诸如图片base64嵌入到css、js里,前端模板编译到js文件中,将js、css、html拆分成几个文件最后合并到一起的能力。有了这项能力,可以有效的减少http请求数,提升工程的可维护性。 fis不建议用户使用内容嵌入能力作为组件化拆分的手段,因为声明依赖能力会更适合组件化开发。
JS中的内容嵌入
js嵌入
__inline('demo.js');
编译后
console.log('demo-test');
将原来的**__inline**里面的js进行了替换
css嵌入
<link rel="stylesheet" type="text/css" href="demo.css?__inline">
编译后:
<style>img { border: 5px solid #ccc; }</style>
图片base64嵌入
<img title="百度logo" src="images/logo.gif?__inline"/>
编译后:
<img title="百度logo" src="data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7"/>
html中嵌入html
<!--inline[demo.html]-->
编译后:
<h1>demo.html content</h1>
JS中的资源嵌入
js中嵌入js
__inline('demo.js');
编译后:
console.log('demo.js content');
js中嵌入base64
var img = __inline('images/logo.gif');
编译后:
var img = 'data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7';
js中嵌入css
var css = __inline('a.css');
编译后:
var css = "body \n{ color: red;\n}";
CSS中资源嵌入
css中嵌入css
@import url('demo.css?__inline');
编译后:
img { border: 5px solid #ccc; };
css中嵌入base64
.style {
background: url(images/logo.gif?__inline);
}
编译后:
.style {
background: url(data:image/gif;base64,R0lGODlhDgGBALMAAGBn6eYxLvvy9PnKyfO...Jzna6853wjKc850nPeoYgAgA7);
}