### 微影前端基础解决方案

#####  [React.js](facebook.github.io/react) SPA
   模块化和组件化的方式，开发单页应用
    
   -  生命周期  
   `react`中的每个组件都有自己的生命周期，开发流程上类似于原生，业务逻辑的处理拆分到各个事件中
   -  组件化  
   组件构成页面，组件公用（html中的标签）
   -  规范化  
   [ES6](./ES6-coding-style.md)，SCSS，约定模块规范
   -  [Redux](http://redux.js.org/)  
   单向数据流，行为诱发组件内容更新，重新渲染
   -  [资源推荐 awesome react](https://github.com/enaqx/awesome-react)


####  基于 webpack 构建 
   -  文件加载器  
   `webpack`的核心所在，按需配置，从文件引用的入口，根据文件的后缀，选择启用相关的loader，优化文件处理过程
   -  处理插件  
   在整个构件范围内，处理文件，比如最终JS文件的压缩和拆分插件
   -  HMR (模块热替换)  
      [当代码修改时，动态地切换，添加，移除某个模块，不需要刷新整个页面](http://webpack.github.io/docs/hot-module-replacement-with-webpack.html)  
   -  性能优化
   智能分析文件和模块的引用关系，动态拆分或者合并资源，按需配置
   -  依赖管理  
   支持commonjs，AMD


### 特性
   － 前端路由  
   通过在前端设置hash location来拆分各个子页面
   -  页面拆分和打包  
   模块按照页面进行拆分，首次只加载依赖的类库模块和hash对应的页面模块，其它页面模块做到了访问时按需加载。
   顺便说下模块组织的规范:
     *  公用JS (对应vendor.bundle.js，包含依赖的基础类库)
     *  公用CSS (对应 app.css, 该文件通过webpack插件从JS代码中抽离出来，不需要在HTML里直接引用)
     *  公用JS和公用CSS，都会单独打包
     *  每个子页面也会单独打包，但不抽离该页面的CSS，页面相关的都包含在该页面的bundle里，各页面之间互不影响
   -  静态资源  
   图片按照大小，小于设置的阀值的都会以base64字符串的形式附加到引用文件中(CSS，JS)，大于阀值的仍采用链接引用的方式
   字体文件也按照图片资源的处理方式,