fis3使用心得
因为项目原因,公司的框架选择是fis3,因此我就接触了下fis3这个东西。楼主没用过webpack,gulp和grunt也不熟,fis3做为自己第一个使用的打包工具,感觉真tm好用。本文主要就介绍一下对于fis3的使用心得(非常非常浅显,仅限于个人粗浅理解,偏近应用。入门可以,深入不一定好)
啥是fis3呢?官方介绍如下:
解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题
1.常用的参数
参数名 | 意义 | 哪一步 |
---|---|---|
-p | 启服务的端口号 | fis3启服务时 |
-w | 监听 | 比如release时监听更改 |
-d | 声明发布路径名 | 发布到当前命令执行目录下 |
-L | 浏览器自动刷新 | 一般-wL这样使用 |
它还可以发布到远程测试机那样,局域网里有接收脚本,就可以直接发布。十分方便。
2.思想
大牛研发fis时说,他们多年经验,前端开发需要的编译能力只有三种:资源定位、内容嵌入、依赖声明。fis3里只需要简单的配置,而其配置项都是根据这三种能力来的设计的。
(1) 资源定位比较好理解:就是比如用的资源,生成了一张索引表之类的玩意,去那里面找对应资源,发布的时候很多加md5撮的。所以如果用这个功能,靠js代码去获取定位的资源,容易gg。(它的好处也很明显:定位资源能力,可以有效地分离开发路径与部署路径之间的关系,工程师不再关心资源部署到线上之后去了哪里,变成了什么名字,这些都可以通过配置来指定。)
(2)内容嵌入:
为使用人提供诸如base64嵌入css,js里,前端编译模板编译到js里,将js、css、html合并成一个的能力。这个能有效减少http请求。
同时个人使用经验里,最后编译成一个组件或者页面的js,css,html编译成一个js,也更进符合组件化开发思路。
(用法在html中可以嵌入其他文件内容或者base64编码值,可以在资源定位的基础上,给资源加 ?__inline 参数来标记资源嵌入需求。常见的比如说往文件插入base64,往html中插入js/css/html等等。)
补充说明下关于base64嵌入问题,开发的时候,静态资源是放png还是png,gif仍旧是gif.然后在代码快里引入这个资源,在资源后加上__inline这个标示。其实不加也可以正常跑代码。(就是传统的请求资源那样)加上后,在编译时,会把gif或者png文件转成base64直接插入代码。
那么为什么要多次一举呢?
主要是转成了base64后可以少请求一次资源!请求多个资源的确会影响移动端性能,所以我们可以转base64,利用现在硬件好的优势,base64解码快,来降低网络请求,达到代码优化的目的~
(3)依赖声明
官方给出的解释如下
声明依赖能力为工程师提供了声明依赖关系的编译接口。
FIS3 在执行编译的过程中,会扫描这些编译标记,从而建立一张 静态资源关系表,资源关系表详细记录了项目内的静态资源id、发布后的线上路径、资源类型以及 依赖关系 和 资源打包 等信息。使用 FIS3 作为编译工具的项目,可以将这张表提交给后端或者前端框架去运行时,根据组件使用情况来 按需加载资源或者资源所在的包,从而提升前端页面运行性能。
3.配置
根据我个人理解,整个fis3工程构建就是首先编译你的代码(处理资源定位啊等等问题),然后将你的代码发布到内置的服务器上(若未发布远程rd就是自己调试的机子)。然后你打开发布上去的入口文件(也可以通过配置直接把入口文件定为这一页),点开直接就能用了。这中间涉及的点都可以通过配置文件fis-conf.js来配置。
比如说我用到了es6的语法,这个有可能造成不兼容。我可以在编译时候用babel插件处理这个问题。(举例代码如下)
fis.match('src/**.vue:js', {
isMod: true,
rExt: 'js',
useSameNameRequire: true,
parser: [
fis.plugin('babel-6.x', {
presets: ['es2015-loose', 'react', 'stage-3']
}),
fis.plugin('translate-es3ify', null, 'append')
]
});
编译问题都在此处解决。
然后就是发布问题,比如发布时加md5撮,再比如发布的地址等等,都是用release关键字。
暂时就这么多,随着以后使用fis3有更进一步体会我再更新这个。