Fis3版本:v3.4.22
Fis3的三大特性
资源定位：获取任何开发中所使用资源的线上路径
内容嵌入：把一个文件的内容(文本)或者base64编码(图片)嵌入到另一个文件中
依赖声明：在一个文本文件内标记对其他资源的依赖关系
声明依赖
FIS3 在执行编译的过程中，会扫描这些编译标记，从而建立一张 静态资源关系表，资源关系表详细记录了项目内的静态资源id、发布后的线上路径、资源类型以及 依赖关系 和 资源打包 等信息。使用 FIS3 作为编译工具的项目，可以将这张表提交给后端或者前端框架去运行时，根据组件使用情况来 按需加载资源或者资源所在的包，从而提升前端页面运行性能。
html声明依赖
实例证明。
目录结构:
D:.
fis-conf.js
index.html
manifest.json
fis-conf.js
fis.match('*.html', {
useMap: true
});
index.html
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>zqz_test</title>
</head>
<body>
<!--
@require demo.js
@require "demo.css"
-->
zqz_test
</body>
mainfest.json
__RESOURCE_MAP__
然后执行编译:
$ fis3 release -d ./out
编译后的目录结构:
D:.
│ fis-conf.js
│ index.html
│ manifest.json
│
└─out
index.html
manifest.json
我们打开manifest.json看看
{
"res": {
"index.html": {
"uri": "/index.html",
"type": "html",
"deps": [
"demo.js",
"demo.css"
]
}
},
"pkg": {}
}
类型，依赖一目了然。
css声明依赖
在上面例子的基础上，我们增加一个demo.css文件。
demo.css
/**
* demo.css
* @require reset.css
*/
body{
background-color: red;
}
继续使用fis3 release -d ./out进行编译
查看manifest.json文件
{
"res": {
"demo.css": {
"uri": "/demo.css",
"type": "css",
"deps": [
"reset.css"
]
},
"index.html": {
"uri": "/index.html",
"type": "html",
"deps": [
"demo.js",
"demo.css"
]
}
},
"pkg": {}
}
这里的打包我们可以不需要fis-conf.js中的
fis.match('*.html', {
useMap: true
});
这样的话我们只会输出css文件的依赖。
{
"res": {
"demo.css": {
"uri": "/demo.css",
"type": "css",
"deps": [
"reset.css"
]
}
},
"pkg": {}
}
js声明依赖
现在已经不支持通过关键字@require来处理依赖了。