搜索
首页web前端html教程fis3初步学习体验_html/css_WEB-ITnose

作为前端开发,或多或少都会接触很多前端构建工具,最近的业务使用到了百度FIS团队的fis3,想和大家分享下我所理解的fis3。

使用方法简单说

首先,你需要安装node和npm

然后,使用 npm install -g install 命令安装fis3,安装完成是这样的

表示安装成功。

然后我们可以通过 fis3 release -w 来对代码进行监听。

注:fis3默认内置了fis3-command-release插件,提供了文件监听和浏览器自动刷新功能,在release的时候添加-w或-L参数就可以,这样可以很方便的部署代码。

当你需要使用插件的时候,可以用 fis3 install -g 插件名 进行安装。

与其他构件工具一样,fis3也需要配置fis-conf.js文件。

添加MD5戳以及资源的合并压缩(配置 useHash: true 即可添加MD5戳)

CssSprite图片合并

对sass文件进行编译

这样我们就可以使用基本的fis3了。

fis三种编译能力

fis3可以做到以下几点:

其主要功能基本都是围绕着前端开发所需要的三种编译能力:资源定位、内容嵌入、依赖声明。

1、资源定位

HTML中的资源定位

js中的资源定位

编译后

css中的资源定位

编译后

2、内容嵌入

3、依赖声明

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插件分析依赖

2、合并资源

3、将静态资源发布到CDN

4、文件入口

5、js引用

除了依赖声明内置语法中资源间相互依赖的语法,fis3还可以解析以下几种语法。

fis3可以综合处理各种资源的模块化,我们不用纠结于JavaScript模块化或是CSS模块化等单独资源的模块化,这样就可以提升开发体验,为性能优化提供良好的支持。这种一体化的模块化方案的目录划分与我们平常按照资源类型划分不同,其目录分为modules(子系统),包括common子系统(可为其他资源提供服务的通用模块)和业务子系统;page,我们实际输出的内容子系统,包含了各种资源的文件。一般来说,JS组件可以封装CSS组件的代码,template模块可以处理HTML、JavaScript和CSS等各种模块化资源。

在js中加载模块

在css中声明依赖关系

前端模块化需要将js、CSS和tpl同时都考虑进去,所以相对其他语言来说更加复杂。拿commonJS举例,commonJS定义的模块有require(引入外部模块)、exports(导出当前模块的方法或变量)以及module(模块本身),只要能提供module、exports、require和global这四个变量,浏览器就能够加载CommonJS模块

构建后,文件会自动加上如下代码

最后

和fis3一样基于nodejs的构建工具有grunt、gulp等,那么fis3与这些热门工具对比有哪些区别呢?

就个人感受而言,grunt真的是太慢了,项目越大,构建时间就越慢,大大拖延了开发速度。grunt有三千多个插件可供选择。

gulp是轻量级的,定制性会更强,想要什么功能就装什么插件,但现有的插件并不一定能满足开发需求,所以可能也需要自己写插件,gulp插件的编写相对其他工具来说可能更方便。gulp有近七百个插件。gulp学习成本较低,只有五个API。

fis3相对来说并没有那么轻量,因此可以做的事情会比较多,所以整个项目都可以使用fis3。感觉fis3相比其他工具更着重性能优化方向。fis3现有可用插件有一千多个,基本足够我们开发使用,如果想要自己开发插件也是非常方便的。总体来说,fis3为前端开发带来了很多方便。

以下为同一个项目用这三种工具构建的结果:

grunt:

gulp:

fis3:

可见构建输出时间grunt>fis3>gulp,这只是我做的初步试验,具体选择哪种工具进行构建还需要开发人员仔细斟酌。

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

< datalist>的目的是什么。 元素?< datalist>的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

> gt;的目的是什么 元素?> gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

我如何使用html5< time> 元素以语义表示日期和时间?我如何使用html5< time> 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

< meter>的目的是什么。 元素?< meter>的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。