Open jincdream opened 8 years ago
组件:一个组件包括了(html、js、css),是业务逻辑的最终表现。
组件化的方式可以有两种: 1.纯编译组件化。 2.后端加载组件化。
在经过编译之后会输出完整的页面,组件的内容已经被编译进相应的地方了。比如通过node.js渲染vue.js模板或者angular.js模板,然后嵌入进html,并添加相应的js、css依赖。
优点:
坑:
用后端模板,扩张模板功能,使其能够通过资源依赖表对资源进行加载。
插件参考:pcat-组件加载、pcat-组件渲染
合并主要指css、js的合并。
合并可以有两种:
是一种比较普遍的方式,可以有效地减少请求数。但会产生很多冗余文件,时间越久,越难清理。
需要后端进行配合,可以利用 nginx connect 或者其他类似功能,对文件进行动态合并输出。面向http2,更合理的优化。但各浏览器对url长度均有限制,应该是目前唯一的缺点。
有官方编译插件。 坑:
有官方编译插件。
感觉不太需要一个通用型的调试服务器。
目录的定制可以参考张云龙的前端开发体系建设日记
另外FIS3里面关于路径的配置有三个: release , deploy, domain
release
deploy
domain
http://192.168.x.x/是本地的一个库,可能多个项目都会用到它
文件最后的访问URL应该是 domain + release 的。 domain也是可以写成 http://192.168.x.x/project这种形式的。
http://192.168.x.x/project
控制media 再控制 release , deploy, domain,就可以有各种URL的产出了。弄清楚这三者的关系,就可以随心所欲实现部署路径了。
media
在反复研读过张云龙的大公司里怎样开发和部署前端代码?的讨论后,认定了非覆盖式部署资源。(下面讨论的都是非覆盖式的部署)
需要进行部署的html页面文件也有两种:
坑:每改动一个引用资源,就需要重新编译和部署一遍静态页面。如果这个资源被所有文件引用,那么所有文件都要进行重新编译和部署。除非用非覆盖式的资源部署,不然不能解决问题。
这用类型也能解决静态html文件的部署问题。但是需要扩展出一个给模板用的资源加载函数,使其能够通过资源依赖表加载相应的资源。
如果html文件/模板需要根据自身MD5来进行版本部署的话,会有个坑:
这个坑来自MD5的计算,如果在FIS3的单文件编译阶段后,把一些非依赖文件内容注入进了编译文件,该文件的MD5是不会再重新计算了的。合并打包后的再自动注入资源链接就有问题了。资源的MD5变了,但文件的MD5却没有变。
就是测试。
转载注明作者、出处。
不太喜欢全局的东西,迁移很麻烦
为什么选择FIS3?
优点:
缺点:
封装流程
确定功能
组件化
组件:一个组件包括了(html、js、css),是业务逻辑的最终表现。
组件化的方式可以有两种: 1.纯编译组件化。 2.后端加载组件化。
纯编译组件化
在经过编译之后会输出完整的页面,组件的内容已经被编译进相应的地方了。比如通过node.js渲染vue.js模板或者angular.js模板,然后嵌入进html,并添加相应的js、css依赖。
优点:
坑:
后端加载组件化
用后端模板,扩张模板功能,使其能够通过资源依赖表对资源进行加载。
优点:
插件参考:pcat-组件加载、pcat-组件渲染
资源合并加载
合并主要指css、js的合并。
合并可以有两种:
打包文件
是一种比较普遍的方式,可以有效地减少请求数。但会产生很多冗余文件,时间越久,越难清理。
combo url
需要后端进行配合,可以利用 nginx connect 或者其他类似功能,对文件进行动态合并输出。面向http2,更合理的优化。但各浏览器对url长度均有限制,应该是目前唯一的缺点。
css预编译
sass编译
有官方编译插件。 坑:
less编译
有官方编译插件。
调试服务器
感觉不太需要一个通用型的调试服务器。
目录流程规范
目录的定制可以参考张云龙的前端开发体系建设日记
关于路径
另外FIS3里面关于路径的配置有三个:
release
,deploy
,domain
文件最后的访问URL应该是 domain + release 的。
domain
也是可以写成http://192.168.x.x/project
这种形式的。控制
media
再控制release
,deploy
,domain
,就可以有各种URL的产出了。弄清楚这三者的关系,就可以随心所欲实现部署路径了。关于部署
在反复研读过张云龙的大公司里怎样开发和部署前端代码?的讨论后,认定了非覆盖式部署资源。(下面讨论的都是非覆盖式的部署)
需要进行部署的html页面文件也有两种:
静态html文件
坑:每改动一个引用资源,就需要重新编译和部署一遍静态页面。如果这个资源被所有文件引用,那么所有文件都要进行重新编译和部署。除非用非覆盖式的资源部署,不然不能解决问题。
动态html模板文件
这用类型也能解决静态html文件的部署问题。但是需要扩展出一个给模板用的资源加载函数,使其能够通过资源依赖表加载相应的资源。
按版本部署
如果html文件/模板需要根据自身MD5来进行版本部署的话,会有个坑:
这个坑来自MD5的计算,如果在FIS3的单文件编译阶段后,把一些非依赖文件内容注入进了编译文件,该文件的MD5是不会再重新计算了的。合并打包后的再自动注入资源链接就有问题了。资源的MD5变了,但文件的MD5却没有变。
封装与插件开发
插件开发tips
合并测试
就是测试。
转载注明作者、出处。