锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / 网站前端开发中级开源技术 / 前端工程构建工具FIS3
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883
微信:ryysoft

前端工程构建工具FIS3

想要能够轻松解决构建流程,最实用的就是构建工具FIS3。好多人还不太了解它的工作原理,我们来简单的学习一下。

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署等问题。 其主要功能基本都是围绕着前端开发所需要的三种编译能力:资源定位、内容嵌入、依赖声明。

FIS3提供了一种简单的配置方式,类似于写CSS,后面书写的规则会覆盖前面前面书写的规则,有一些固定的规则供用户设置;文件分配到的属性,将会在编译阶段决定此文件将如何处理。FIS3 的核心配置思想是通过给文件分配属性来控制工具对文件的处理,比如压缩、异构语言的解析、资源依赖的收集、代码检查等;

FIS3 重新梳理构建流程,文件在 FIS3 中编译都是由用户指定的插件来完成,包括合并、压缩优化以及对异构语言的解析等。FIS3 还可以支持本地 NPM 包的加载,这样一来我们就不再需要 npm install -g 安装一个插件到全局包目录,只要加载本地插件就可以了;这样有利于插件的开发调试。但为了便于维护,建议你最终发布到 NPM 上的插件依然使用全局安装。

FIS3 对整个编译流程提供诸多事件,方便你做特定化需求;并且推出新的插件类型 hook,hook 插件会在编译之前做加载,可在其内部绑定一些事件来完成特定的需求,比如相对路径的支持。

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插件的支持。

整个 FIS3 的构建流程大题概括分为三个阶段:
1.扫描项目目录获得文件并初始化出一个文件对象列表
2.对文件对象中每一个文件进行单文件编译
3.获取用户设置的 package 插件,进行打包处理(包括合并图片)

下面是一些FIS3的常用命令,希望可以帮助到你们:

1、fis 打开根目录

fis3 server start
fis3 server open

2、将项目发布到服务器中

cd 进入项目中
fis3 release 即可发布到服务器中

3、安装fis的包管理工具 lights

npm install -g lights

4、查看fis release的参数

fis release -h

5、静态资源压缩

在配置文件中添加如下代码:
  // 清除其他配置,只保留如下配置
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') });

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内