`
zccst
  • 浏览: 3319791 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

fis纯前端解决方案fis-pure

    博客分类:
  • fis
阅读更多
作者:zccst

FIS通过插件扩展可以完美的支持模块化的前端开发方案,我们通过FIS的二次封装能力,封装了一个功能完备的纯前端模块化方案pure。

1,fis-pure的安装
$ fis install -g fis-pure
$ pure -v
0.1.4

2,下载demo到本地
git clone https://github.com/hefangshi/fis-pure-demo.git


对比pure与quickstart的实例:

首先,fis-pure-demo与fis-quickstart-demo都是一个TODO DEMO
但是对比一下可以发现,两个项目最大的区别在于fis-quickstart-demo得index.html中包含了大量的脚本和样式资源引用,而在fis-pure-demo中,我们只看到了对Mod库的引用。

其次,通过浏览两者的脚本文件,我们会发现fis-quickstart-demo的脚本中都添加了 define 包装
define('main', function(require, exports, module){
    //content
}
而在fis-pure-demo中,则完全看不到 define 的痕迹,只有与Node.js模块化语法完全一致的 require 与 module.exports。


3,发布预览
首先我们不附加任何优化参数,进行发布预览

$ pure release # pure server open可以查看构建结果
$ pure server start # 如果提示端口冲突可以添加-p参数调整端口

打开页面,我们会发现fis-pure-demo与fis-quickstart-demo一样,在页面内准确的引用了需要的脚本与样式资源。而这不同之处在于,这些资源的引用不再需要人工维护,只要使用pure进行构建工作,不需要任何配置就可以自动完成资源的加载。

当然,我们会发现所有的资源引用都是独立的,发起了大量的HTTP请求,并且随着网站复杂度的提升,这个问题也会越来越严重。可能有的同学已经想到,我们可以使用FIS的资源合并能力对当前项目进行性能优化。


4,性能优化
综合一下我们在快速入门中学到的优化命令,我们为fis-pure-demo进行资源压缩、添加md5戳、资源合并等性能优化工作

$ pure release -pmo

经过简单的一个命令,我们再次刷新页面,可以看到请求数已经大幅减少,可以尝试不同的release优化参数,感受不同的优化参数带来的不同体验。

简单的几个步骤,我们就实现了模块化资源的自动加载以及完全脱离后端的资源管理能力,是不是感觉很不错呢?不妨自己写一个小DEMO体验一下静态资源自动化管理、性能优化简单可依赖的快感吧!



附:了解更多

实际上pure只是通过FIS的解决方案封装能力封装而成,其底层核心仍然是FIS,与FIS不同之处在于默认集成了一些功能扩展插件,比如用于模块化资源自动加载的fis-postpackager-autoload以及静态资源自动合并插件fis-postpackager-simple。这些插件与配置的集成实际上都是十分简单快速的,具体可以参考解决方案封装部分以及fis-pure的源码部分。如果对pure是如何实现的感兴趣,可以点击了解更多。

FIS的优势在于灵活的定制、扩展、封装能力,并且通过内建的语言能力扩展能力,解决了大量复杂繁重的工作,让开发插件变成一种乐趣。无论是个人使用,还是大中小各种规模的团队,都可以通过FIS满足自己的开发需求。

pure与Require.js、Sea.js等模块化方案相比,拥有同步加载脚本资源的能力,首屏渲染时间更短。并且资源打包无需依赖后端Combo服务等外部依赖。但是作为纯前端解决方案,必然也有其局限性,pure不支持类似母版页的技术,每个页面文件均需要是完整的网页,即需要包含完整的head、body元素。如果希望支持后端模板组件化能力,可以点击这里了解更多的基于FIS的模块化解决方案。
分享到:
评论

相关推荐

    前端开源库-fis-optimizer-uglify-js-nfd

    fis是一个强大的前端集成解决方案,它提供了从项目构建、资源管理到代码部署等一系列自动化工具。 `fis` 是一个轻量级但功能齐全的前端构建系统,它的核心理念是让开发者专注于编写代码,而把琐碎的构建任务交给fis...

    前端开源库-fis-optimizer-sm-uglify-js

    《前端开源库FIS-Optimizer-SM-Uglify-JS详解》 在现代Web开发中,前端性能优化是一项至关重要的任务。为了提升网页加载速度,减少网络传输的数据量,前端开发者常常会使用各种工具对JavaScript代码进行压缩和优化...

    前端开源库-fis3-packager-deps-pack

    FIS3(Fast Integrate System 3)是一个强大的前端集成解决方案,它提供了一整套工具集来支持现代Web应用的开发流程。而`fis3-packager-deps-pack`是FIS3生态系统中的一个插件,专门用于处理资源的依赖打包。 **FIS...

    前端开源库-fis-parser-less-px2rem

    "fis-parser-less-px2rem" 是一个专门为前端开发者设计的开源库,它整合到了 FIS(Fast-Island-Serve,一个前端工程化解决方案)框架中,用于处理Less样式表中的px到rem的自动转换。这个库的主要目标是简化移动Web...

    百度基于FIS的前端集成解决方案

    **百度基于FIS的前端集成解决方案** 在当前的Web开发环境中,前端开发的复杂性日益增加,这使得高效、统一的前端集成解决方案变得至关重要。百度的FIS(Fast Integrated Solution)便是为解决这一问题而生的,它是...

    前端开源库-fis3-parser-vue-component

    2. **配置FIS3**:在项目中创建.fis-conf.js配置文件,导入并启用FIS3 Parser Vue Component插件。 3. **编写Vue组件**:按照Vue的规范编写组件,保存在项目的特定目录下。 4. **构建项目**:运行FIS3的构建命令,...

    前端开源库-fis-postprocessor-require-async

    FIS是一个强大的前端集成解决方案,它集成了构建、部署、调试等多种功能,为前端开发者提供了一站式的开发环境。在FIS中,`require.async`是一种关键特性,用于实现按需加载模块,提高应用的加载速度和性能。`fis-...

    前端开源库-fis-deploy-amdpackage

    "fis-deploy-amdpackage" 是一个专门为前端开发设计的开源库,它专注于AMD(Asynchronous Module Definition)模块的打包和部署。下面我们将详细探讨这个库的功能、AMD模块以及它如何将AMD代码转换为标准JavaScript...

    前端开源库-fis-postpackager-jpgtowebp

    `fis`(Fast Instant Site)是一个轻量级、高性能的前端构建工具,它提供了诸如文件管理、预处理、合并、压缩等一套完整的前端工程化解决方案。`postpackager`是fis框架的一部分,主要负责在打包过程的后期对文件...

    前端开源库-fis-parser-jade

    FIS(Fast Integrate System)是一个强大的前端集成解决方案,它提供了完整的前端开发流程支持,包括静态资源管理、模块化、压缩、合并、自动化测试等。而Jade,则是一种简洁、高效的HTML模板语言,它的设计目标是...

    前端开源库-fis-parser-coffee-script

    【前端开源库-fis-parser-coffee-script】是一个专为前端开发者设计的开源工具,它作为FIS(Fast Integrate System)框架的一个插件,主要功能是解析和编译CoffeeScript代码。FIS是一个强大的前端构建系统,旨在提高...

    前端开源库-fis-optimizer-minify-html

    FIS(Fast Instant Site)是一个强大的前端集成解决方案,旨在提高前端开发效率和代码质量。而`fis-optimizer-minify-html`则是FIS框架下的一个优化器,主要功能是对HTML文件进行压缩,从而减小文件大小,提升网页...

    前端开源库-fis-parser-jade-runtime

    【前端开源库-fis-parser-jade-runtime】是一个用于前端开发的重要工具,主要功能是解析Jade模板语言并将其编译成浏览器可执行的JavaScript模板文件。这个库是基于FIS(Fast Introduction for Sitebuilding)框架的...

    前端开源库-fis-optimizer-minify-smarty

    综上所述,【前端开源库-fis-optimizer-minify-smarty】是提升基于Smarty模板引擎的前端项目性能的利器,通过自动化压缩和混淆,它有效地减少了代码体积,加快了网页加载速度,为开发团队带来了显著的效率提升。...

    前端开源库-fis-postprocessor-require-async.zip

    标题中的“前端开源库-fis-postprocessor-require-async.zip”指的是一个前端开发相关的开源库,这个库使用了FIS(Fast Integrate System)框架的一个特定组件——`fis-postprocessor-require-async`。FIS是百度开发...

    前端开源库-fis-parser-utc

    总之,`fis-parser-utc`作为FIS框架的一员,为使用Underscore模板语言的前端开发者提供了便捷和高效的模板编译方案,帮助他们构建高性能、易于维护的前端应用。通过深入理解和使用这个工具,可以极大地优化前端开发...

    前端开源库-fis-postprocessor-autoprefixer

    前端开源库-fis-postprocessor-autoprefixerFIS后处理器autoprefixer,一个为FIS到autoprefixer CSS用户postcss/autoprefixer提供的优化器。

    前端开源库-fis-deploy-uglify-js

    本文将深入探讨`fis-deploy-uglify-js`的工作原理、使用方法以及其在前端项目中的应用。 `fis`(Fast Introduction for Smart)是一个开源的前端构建工具,旨在简化前端开发流程,提高开发效率。`fis-deploy-uglify...

    前端开源库-fis3-deploy-skip-packed

    FIS3 是腾讯推出的一款前端集成解决方案,它不仅包含了模块化、资源管理和打包等基础功能,还提供了一套完整的前端工程化流程,包括预处理、静态资源优化、自动化测试以及发布部署等。在项目构建过程中,压缩文件是...

    前端开源库-fis-postpackager-simple

    【前端开源库-fis-postpackager-simple】是一个针对前端开发的开源工具,它是一个FIS(Fast Interactive Site)框架下的Postpackager插件。FIS是百度推出的一个快速、高效且灵活的前端构建系统,旨在解决前端开发中...

Global site tag (gtag.js) - Google Analytics