fis入门-单文件编译之文件优化(optimize)
FIS(Front-end Integrated Solution ),是百度的前端集成解决方案。最近几天在研究前端构建的东西,就顺便了解了下,果断各种高大上,可以到FIS官网围观感受一下。如果对fis还不熟悉的童鞋,可以跑下官网的小demo体验一下。
好了,这篇文章不是fis的科普文,官方文档已经挺详细了。这里主要讲下FIS单文件编译的优化(optimize)环节。
FIS单文件编译-optimize
FIS详细运行原理这里不展开,有兴趣的可以看下官方文档。我们只是简单地看下单文件编译的其中一个环节:optimize(文件优化)。从optimize这个单词就大致可以猜到是做什么的,比如js、css、图片文件的压缩等。(下图为FIS官方配图)
FIS optimize原理
那么FIS是如何做到这一点的呢?
其实很简单。拿官网的demo来说,假设我们在运行 fis release 的时候加上 --optimize 参数,那么所有的css、js、图片文件都会被优化(文件压缩)。
FIS的系列插件中,以fis-optimizer 开头的插件都是用来完成文件优化这一任务的,比如 fis-optimizer-uglifiy-js、fis-optimizer-clean-css 等。因为FIS已经默认内置并配置好了 fis-optimizer-uglifiy-js、fis-optimizer-clean-css等插件,所以运行时检测到 --optimizer 参数时,就会调用相应的插件,完成对js、css、图片文件的优化。
fis release -d output --optimize
内窥optimizer插件——以fis-optimizer-uglify-js为例
在前端构建中,js文件的压缩绝对是非常重要的一环。在FIS内置插件中,js文件压缩这个重任是由fis-optimizer-uglify-js来完成的。那么,我们就来看看它的源码,千万不要吓到。
相信各位看官的第一反应跟我差不多,都是大喊一声what the fuck,竟然只有这么几行代码。当然,这里并没有任意贬低的色彩,而是由衷地赞叹,这插件实现得相当精妙(由fis的架构设计决定的)。
/* * fis * http://fis.baidu.com/ */ 'use strict'; var UglifyJS = require('uglify-js'); module.exports = function(content, file, conf){ conf.fromString = true; return UglifyJS.minify(content, conf).code; };
站在巨人的肩膀上——自定义js文件压缩插件
小标题起得有点标题党啦,之所以会写这篇文章,是因为想要了解FIS插件的配置、自定义,在官方文档间绕来绕去才找到了一点门路,觉得有必要备忘一下。
FIS默认的js压缩插件用的是fis-optimizer-uglify-js,如果我们想用自己定义的插件,比如 fis-optimizer-test 呢?(请原谅我随便起了个名字)。很简单,首先改下项目配置(fis-conf.js),指定js压缩采用 fis-optimizer-test这个插件。
fis.config.merge({ modules : { optimizer : { //js后缀文件会经过fis-optimizer-test插件的压缩优化 js : 'test' } } });
插件指定好了,那这个插件从哪来呢?原谅我又偷懒了,只是在 fis-optimizer-uglify-js插件 的同级目录下,将 fis-optimier-uglify-js 这个目录复制了一遍,然后将index.js的内容改成下面这样子。(项目实战中真有这样的插件就逆天了。。。)
/* * fis * http://fis.baidu.com/ */ 'use strict'; module.exports = function(content, file, conf){ return content+'\nvar nick ="程序猿小卡"'; };
再次运行之前的构建命令
fis release -d output --optimize
看看被压缩后的demo.js,就可以看到区别了。堪称史上最逆天的js代码压缩工具,无任何代码优化功能,还乱插代码。。。
console.log('inline file'); function hello(argument) { var nick = 'casper'; var age = 26; } var nick ="casper"
写在后面
FISd的官方文档算是比较详细,设计细节的描述也不少,所以本文就不打算成体系地从头到尾把FIS的设计原理讲一遍了,仅仅是挑一些小点出来备忘而已。
ps:前文的插图来自FIS的官方wiki,不算盗图吧~~如果涉及盗图还请提醒下~~
相关文章
- PE文件附加数据感染之Worm.Win32.Agent.ayd病毒分析
- linux环境中,如何通过手动创建crontab文件的方式来设置crontab定时调度任务?
- EF+LINQ事物处理 C# 使用NLog记录日志入门操作 ASP.NET MVC多语言 仿微软网站效果(转) 详解C#特性和反射(一) c# API接受图片文件以Base64格式上传图片 .NET读取json数据并绑定到对象
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- java Swing GUI 入门-文件读写器
- 关于图片文件的元数据信息清理和时间戳修改
- 《微信小程序:开发入门及案例详解》—— 2.3 框架主体文件
- [转]ExtJs入门之filefield:文件上传的配置+结合Ajax完美实现文件上传的asp.net示例
- 网络安全系列-三十五:公开的用于网络流量分析的pcap文件
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——2.2 HTML文件的编写方法
- 《HTML与CSS入门经典(第8版)》——第2章 发布Web内容2.1 创建用于本章的示例文件
- Androlid入门之文件系统操作(三)文件读写
- Android入门之文件系统操作(一)简单的文件浏览器
- HDFS FsImage文件
- Kivy教程之 如何通过字符串方式载入kv文件设计界面(教程含源码)
- CloudKit快速入门之05 多媒体和大文件存储Asset and Location Fields (SwiftUI iCloud CloudKit中文文档手册教程)
- JNI入门课程-第六章:JNI中读取本地文件
- 解决 无法把日志写入自定义log文件中 Ubuntu rsyslog
- 禁止Windows远程桌面拷贝文件
- 【Unity】C#+Visual Studio生成DLL文件(步骤图解)
- Vscode 新建HTML文件
- 【Git学习】四、.gitignore文件的使用
- 《C#零基础入门之百识百例》(九十三)本地数据交互 -- 文件相关类介绍 -- 读写txt文本文件
- VS2010/MFC编程入门之四十五(MFC常用类:CFile文件操作类)
- VS2010/MFC编程入门之十七(对话框:文件对话框)
- 阿里云OSS上文件下载后文件名前带下划线前缀问题的解决
- vue项目打包后字体文件路径出错的解决办法
- 文件操作与文件流
- Python入门学习笔记第十章——文件和异常~~~
- 将本地文件上传到码云(gitee远程仓库)