作为前端开发,或多或少都会接触很多前端构建工具,最近的业务使用到了百度 FIS 团队的 fis3,想和大家分享下我所理解的 fis3。
使用方法简单说
首先,你需要安装 node 和 npm
然后,使用 npm install -g fis3 命令安装 fis3,安装完成是这样的
然后我们可以通过 fis3 release -w 来对代码进行监听。
注:fis3 默认内置了 fis3-command-release 插件,提供了文件监听和浏览器自动刷新功能,在 release 的时候添加-w 或-L 参数就可以,这样可以很方便的部署代码。
当你需要使用插件的时候,可以用 fis3 install -g 插件名 进行安装。
与其他构件工具一样,fis3 也需要配置 fis-conf.js 文件。
添加 MD5 戳以及资源的合并压缩(配置useHash: true即可添加 MD5 戳)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
fis.media('offpack') .match('**.{js,tpl}', { optimizer: fis.plugin('uglify-js'), useHash: true }) .match('**.{css,scss,sass}', { optimizer: fis.plugin('clean-css'), useHash: true }) .match('**.png', { optimizer: fis.plugin('png-compressor') }) }); |
CssSprite 图片合并
1 2 3 4 5 6 |
.match('::package', { spriter: fis.plugin('csssprites') }) .match('*.css', { useSprite: true }) |
对 sass 文件进行编译
1 2 3 4 5 6 |
.match('**.{scss,sass}', { parser: fis.plugin('sass', { include_paths: ['modules/common/sass'] }), rExt: '.css' }) |
这样我们就可以使用基本的 fis3 了。
fis 三种编译能力
fis3 可以做到以下几点:
其主要功能基本都是围绕着前端开发所需要的三种编译能力:资源定位、内容嵌入、依赖声明。
1、资源定位
HTML 中的资源定位
1 2 3 |
fis.match('*.css', { packTo: '../demo/demo.css' }) |
js 中的资源定位
1 |
var img = _uri('img/inline/star-full.png'); |
编译后
1 |
var img = 'http://pub.idqqimg.com/.../img/inline/star-full.png'; |
css 中的资源定位
1 |
@import url('seed.css'); |
编译后
1 |
@import url('http://pub.idqqimg.com/.../index/seed.css'); |
2、内容嵌入
1 |
<script src="partial/common/mod.js?__inline"></script> |
1 |
__inline('demo.js'); |
3、依赖声明
1 2 3 4 |
/** * index.css * @require main.css */ |
fis3 的设计原则是“ 基于依赖关系表的静态资源管理系统与模块化框架设计”,所以我们就从静态资源管理和模块化两方面来理解下 fis3。
静态资源管理
关于性能优化是前端经久不衰的必须思考的问题,一个网站如果想要做到响应快高并发,那其中一个很有效的办法就是尽量让网站静态化。做到动静分离。我们可以使用 CDN 技术,将静态资源保存在 CDN 上,可以用静态资源的 CDN 路径拉取到资源,减轻服务器的压力。fis3 实现了一套“ 静态资源管理系统”,在开发页面的时候只需要用相对路径开发,构建后会生成带有 hash 静态资源版本号的文件,避免发布后页面错乱。
静态资源的大小也会影响网络传输效率,fis3 也提供了很多插件来对图片进行合并、对 HTML、js、css 文件进行合并,fis3 会对路径中带有?__sprite的图片进行合并,减少了请求数量。但单纯的资源合并是没有办法按需加载资源的,然而静态资源按需加载也是减少资源冗余的很重要的方式。使用 fis3 会生成静态资源映射表,是记录文件依赖等信息的表,虽然不会生成 map.json,但当文件包含“__RESOURCE_MAP__” 字符,就会用表结构数据替换这里的字符。静态资源系统可以根据表结构数据中对应对的信息进行加载。这样就解决了按需加载的问题。
模块化开发
前端模块化开发对开发人员来说具有很重要的意义,模块化可以方便代码复用,提升可维护性。我们熟悉的模块化开发有 commonjs、AMD、CMD,模块化框架有 mod.js、require.js、sea.js 等。
Fis3 默认不支持模块化开发,所以需要 fis3-hook-commonjs/fis3-hook-amd/fis3-hook-cmd、fis3-postpackager-loader 以及 fis3-deploy-wsd-cdn-upload 插件的支持。
配置 fis-conf.js 的流程:
1、使用 fis3-postpackager-loader 插件分析依赖
1 2 3 4 5 6 |