初级阶段， 选用什么库| 框架 才能 适合现在公司业务， 在现有成员技术能力基础上能做到快速开发， 迭代
基础库 动画 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
