工程化 经历的 4 个阶段

 连接

 工程化实践 叶小钗

架构管理那些转型的事情

 

大型网站工程与性能优化

初级阶段， 选用什么库| 框架 才能 适合如今公司业务， 在现有成员技术能力基础上能作到快速开发， 迭代

基础库 动画 animate.css 数据操做 underscore.js dom操做 jquery 字体图片 font Awesome

页面布局 bootstrap

框架 react vue angular avalon

合理的技术选型， 积累最适合的工具链， 能大大提升开发效率

中级阶段：

简单构件化 包括 css js 压缩代码 合并代码， 代码校验等， 利用gulp grunt等

压缩 合并 后能很大程度提升js 加载速度，

通过构建后提升性能仍是有很大帮助

高级阶段：

利用 cmd amd 把复杂的代码模块化，

通过模块化后， 能大大提升维护效率， 特别是多人开发的依赖管理问题， 模块的复用等

最终阶段：

组件化， 资源管理

解决 按需加载， 文件指纹， 多状态， 不一样的网络环境， 不一样的这段

前面阶段是 模块的分治， 但模块太广， 这个页面能够是模块， 一个方法也能够是模块

而UI页面一样须要分治， 才能实现UI组件的复用， 实现组件的互相组合， 从而能够应付各类需求的复杂变化

并且每一个组件在同一个目录， 各类资源能够就近维护， 让开发变得更加集聚， 方便， 这样也方便替换， 和删除

就近维护是最有价值的， 现在 react vue都采用这种方式， 这样有利于分工开发，

也有利于维护， 修改后不至于影响其余组件功能

如： header 头部导航 bill（开发者）

tab tab切换 马化腾

list 新闻列表 李彦宏

footer 页脚 马云

能够看到， 他们4个能够并行开发， 能够支持多个成员 ， 甚至多个团队共同维护一个大型站点


前期须要抽取一些底层模块， 以及一些公共的UI组件， 好比分页 ， 上传， 日期等经常使用的组件

组件化作好以后， 须要 智能的静态资源管理,  作好【增量】 加载

如何加载不一样的组件， 现在有 webpack 能够加载任何静态资源， 好比图片 css js html等， 实现了不一样的页面【增
量】 加载不一样的组件资源, 同时也支持 延迟加载， 预加载等策略

随着 浏览器缓存，利用 更新 共享 非覆盖发布等方案， 出现 BingRender BigPipe Quick PageCache等技术

这些虽然解决了各类资源等组合加载问题， 但对高复杂状态的管理， 仍是还不够智能

好比 1w+的静态资源， 每一个资源须要生成 100 + 的语言

每一个资源针对不一样的 浏览器终端 须要生成 5 + 的版本

须要针对不一样宽带的用户 作成 3 种不一样 的打包方式

须要对一些用户推出 小批次的产品新功能体验

而且 静态资源的压缩 和 非压缩状态能够切换， 用于调试 和 定位线上问题

3g 网络 + 新功能1 + 英文 + safari + pc端 + 多页面 + 后端渲染 + 皮肤1

4g网络 + 中文 + ios + 前端渲染 + 皮肤2

wifi + 韩文 + ie6/7 + 新功能2

这样组合后， 状态就变的很是多， 也很是复杂

解决这种问题， 须要扫描整个静态资源， 组件， => 生成一个静态资源表

而后有一个资源管理框架 经过查表来提供接口 加载各类资源， 去掉传统的script link

静态资源表来记录 每一个资源 模块的路径和 依赖的模块

{
"a.js": {
"url": "/static/js/a.5f100fa.js",
"dep": [ "b.js", "a.css" ]
},
"a.css": {
"url": "/static/css/a.63cf374.css",
"dep": [ "button.css" ]
},
"b.js": {
"url": "/static/js/b.97193bf.js"
},
"button.css": {
"url": "/static/css/button.de33108.js"
}
}

加载框架能够利用各类性能优化算法来加载资源了 ，由于有了资源表，

咱们能够很方便的控制资源加载，经过各类手段在运行时计算页面的资源使用状况，从而得到最佳加载性能

好比使用最多的优先加载， 经过日志来监控， 甚至自动优化

 

框架具备很大的灵活性，并且不那么黑盒，采用【框架】实现资源管理相比 【构建】更容易调试、定位和升级变动

就好像面向对象 和 面向过程那样

https://blog.coding.net/blog/frontend-engineering