浅谈百度的FIS3框架

喜欢ヅ旅行 2022-06-16 00:58 385阅读 0赞

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题。

1、FIS3的安装

安装命令：npm install -g fis3

查看是否安装成功：fis3 -v

升级FIS3：npm update -g fis3或npm install -g fis3（重装）

2、FIS3 的构建

FIS3 的构建不会修改源码，而是会通过用户设置，将构建结果输出到指定的目录，构建的结果才是用来上线使用的。

项目根目录：FIS3 配置文件（默认为fis-conf.js）所在的目录。

进入项目根目录，执行命令，进行构建：fis3 release -d <path>

①　构建发布到项目目录的 output 目录下：fis3 release -d ./output

②　构建发布到项目父级目录的 dist 子目录下：fis3 release -d ../dist

③　构建发布到其他盘（Windows）：fis3 release -d D:\\output

1) 资源定位

资源定位是FIS的重要特性之一。

构建过程中对资源 URI 进行了替换，相对路径替换成了绝对路径。

资源定位可以有效地分离开发路径与部署路径之间的关系，开发人员不必关心资源部署到线上后的去向和名字，这些都可以通过配置来指定，只需要使用相对路径来定位资源即可。这样的好处是：资源可以发布到任何静态资源服务器的任何路径上，而不用担心线上运行时找不到，而且代码具有很强的可移植性，甚至可以从一个产品线移植到另一个产品线而不用担心线上部署不一致的问题。

在默认不配置的情况下只是将资源相对路径替换成了绝对路径。通过配置文件可以轻松分离开发路径与部署路径。如让所有的静态资源构建后到 static 目录下：

fis.match('*.{png,js,css}', {
      	release: '/static/$0'
    });

构建到 ../output 目录下看变化：fis3 release -d ../output

2) 配置文件

默认的配置文件为 fis-conf.js，FIS3 编译的整个流程都是通过配置来控制的。

FIS3 定义了一种类似 CSS 的配置方式：fis.match(selector, props);

①　selector ：

把文件路径作为selector，匹配到的文件会分配给设置的 props。

②　props ：

编译规则属性，包括文件属性和插件属性。

重要特性：

①　规则覆盖：

selector 同时匹配的文件，后面的规则会覆盖前面定义的规则中的同名属性。

eg：

fis.match('*', {
    	release: '/static/$0'
    });
    fis.match('test.js', {
    	useHash: true,
    	release: '/statuc/js/$0'
    });

test.js 分配到的属性：

{
      	useHash: true,
    	release: '/dist/js/$0'
    }

②　fis.media()

fis.media() 接口提供多种状态功能，如有些配置仅供开发环境下使用，有些则仅供生产环境使用。

eg：

fis.media('prod').match('*.js', {
    	optimizer: fis.plugin('uglify-js')
    });

fis3 release prod：编译时使用 prod 指定的编译配置，即对 js 进行压缩。

eg：

fis.media('rd').match('*', {
      	deploy: fis.plugin('http-push', {
        	receiver: 'http://remote-rd-host/receiver.php'
      	})
    });

fis3 release rd：编译时使用rd指定的编译配置 ，即push 到 RD 的远端机器上。

eg：

fis.media('qa').match('*', {
      	deploy: fis.plugin('http-push', {
        	receiver: 'http://remote-qa-host/receiver.php'
      	})
    });

fis3 release qa：编译时使用qa指定的编译配置 ，即push 到 QA 的远端机器上。

media dev 已经被占用，不加 <media> 参数时默认为 dev。

fis3 inspect <media> 查看特定 media 的分配情况。

3) 文件指纹

文件指纹唯一标识一个文件。在开启强缓存的情况下，如果文件的 URL 不发生变化，无法刷新浏览器缓存。一般都需要通过一些手段来强刷缓存，一种方式是添加时间戳，每次上线更新文件，给其URL 添加上时间戳。

FIS3 选择的是添加 MD5 戳，直接修改文件的 URL。

eg：对 js、css、png 图片引用 URL 添加 md5 戳。

fis.match('*.{js,css,png}', {
      	useHash: true
    });

构建到 ../output 目录下看变化：fis3 release -d ../output

4) 压缩资源

为了减少资源大小，需要通过压缩器对 js、css、图片进行压缩。在 FIS3 中通过给文件配置压缩器即可。

fis.match('*.js', {
    	// fis-optimizer-uglify-js 插件进行压缩，已内置 optimizer:
    	fis.plugin('uglify-js')
    });
    fis.match('*.css', {
    	// fis-optimizer-clean-css 插件进行压缩，已内置 optimizer:
    	fis.plugin('clean-css')
    });
    fis.match('*.png', {
    	// fis-optimizer-png-compressor 插件进行压缩，已内置optimizer:
    	fis.plugin('png-compressor')
    });

构建到 ../output 目录下看变化：fis3 release -d ../output

5) CSSSprite文件合并

可以对图片进行合并，来减少请求数量。

FIS3 提供了简易、使用方便的图片合并工具，通过配置即可调用此工具并对资源进行合并。

FIS3 构建会对 CSS 中，路径带 ?\_\_sprite 的图片进行合并。为了节省编译的时间，分配到 useSprite: true 的 CSS 文件才会被处理。

#list1::before {
      	background-image: url('./img/img1.png?__sprite');
    }
    #list2::before {
      	background-image: url('./img/img2.png?__sprite');
    }

// 启用 fis-spriter-csssprites 插件
    fis.match('::package', {
      	spriter: fis.plugin('csssprites')
    });
    // 对 CSS 进行图片合并
    fis.match('*.css', {
      	// 给匹配到的文件分配属性 `useSprite`
      	useSprite: true
    });

6) 功能组合

压缩、文件指纹、图片合并、资源定位的功能组合后的配置文件如下：

fis.match('*.{js,css,png}', {
      	useHash: true
    });
    fis.match('::package', {
      	spriter: fis.plugin('csssprites')
    });
    fis.match('*.css', {
      	useSprite: true
    });
    fis.match('*.js', {
      	optimizer: fis.plugin('uglify-js')
    });
    fis.match('*.css', {
      	optimizer: fis.plugin('clean-css')
    });
    fis.match('*.png', {
      	optimizer: fis.plugin('png-compressor')
    });

3、调试

构建过程会将相对路径替换成绝对路径，因此，构建后，本地双击打开文件是无法正常工作的，这给调试带来了问题。

FIS3 内置一个简易 Web Server，可以方便调试构建结果。

1) 目录

构建时不指定输出目录，即不指定 -d 参数时，构建结果被发送到内置 Web Server 的根目录下，此目录可以通过执行以下命令打开：fis3 server open。

2) 发布

发布命令：fis3 release。不加 -d 参数默认被发布到内置 Web Server的根目录下，当启动服务时访问此目录下的资源。

3) 启动

通过fis3 server start来启动本地Web Server，当Server启动后，默认监听端口8080，浏览器会自动打开http://127.0.0.1:8080，即可查看页面渲染结果。如果不重启计算机或者调用命令关闭，FIS3 内置的Server是不会关闭的，因此后续只需访问对应链接即可，而不需每次 release 就启动一次 server。

4) 文件监听

FIS3 支持文件监听，当启动文件监听时，修改文件会构建发布，且其编译是增量的，编译花费时间少。

FIS3 通过对 release 命令添加-w 或--watch 参数启动文件监听功能：fis3 release -w或fis3 release --watch。

添加文件监听时，程序不会执行终止，停止程序用快捷键 CTRL+c。

5) 浏览器自动刷新

FIS3 支持浏览器自动刷新功能，只需给 release 命令添加 -L 参数，通常 -w 和 -L 一起使用：

fis3 release -wL。

停止程序用快捷键 CTRL+c。

6) 发布到远端机器

开发项目后，需要发布到测试机（联调机）。FIS3 默认支持使用 HTTP 上传代码，首先需要在测试机部署上传接收脚本（或服务），可以把该脚本放到测试机上某个Web服务根目录，并配置一个 url 能访问到即可。

fis.match('*', {
    	deploy: fis.plugin('http-push', {
    		receiver: 'http://server.fis3.com:8888/receiver.php',
    		to: '/home/work/htdocs' // 注意：这是测试机路径，而非本地机器
    	})
    });

fis3 release：发布到远端测试机。

可能上传测试机是最后联调时才会有的，更好的做法是设置特定 media：

fis.media('qa').match('*', {
    	deploy: fis.plugin('http-push', {
    		receiver: 'http://server.fis3.com:8888/receiver.php',
    		to: '/home/work/htdocs' // 注意：这是测试机路径，而非本地机器
    	})
    });

fis3 release qa：发布到远端测试机。

fis3 release ：产出到本地服务器根目录。

7) 替换内置Server

FIS3 内置了一个 Web Server 来对构建后的代码进行调试，当然也可以启动自己的 Web Server。

假设Web Server 的根目录是 /myServer/work/htdocs，那么发布时只需设置构建发布到这个目录即可：

fis3 release -d /myServer/work/htdocs

如果想执行 fis3 release 直接发布到此目录下，可在配置文件配置：

fis.match('*', {
      	deploy: fis.plugin('local-deliver', {
        	to: '/myServer/work/htdocs'
      	})
    });