概述
web应用从本质上说就是一种运行在浏览器上的软件，而这些软件的图形化用户界面即为web前端。现如今，web应用更加的复杂，例如社交网络，购物平台，金融信贷等。这样的应用，动辄就是几十上百人一起开发并维护的，其前端界面的规模也极为庞大。与此同时，web应用面对的用户对于前端界面的要求也越来越多。因此，从软件工程化的角度去思考前端开发是大势所趋。
传统方式的不足和待解决的问题
以前，前端资源是按照页面或类似业务页面集合的形式进行组织。例如，manage.js对应着管理界面的交互；user.css对应着用户界面的样式，这种方式在很长一段时间内广泛使用。
存在的不足：
- 前端页面资源冗杂。页面功能越来越多，交互越来越复杂，前端代码量增多。直接导致为了使用一个js中某个函数，可能需要加载整个js文件，或者为了使用部分css样式，需要加载其依赖的整个css，这样无疑会增加请求，影响页面性能。
- 资源维护困难。js和css等资源是依赖于页面或者相似页面集合，它们之间的依赖关系也只能通过人来维护，容易出错，常出现删除某个页面但其相关的资源还存在的情况。
- 不利于单元测试。以页面为最小粒度进行资源整合，不同功能的业务模块相互影响，耦合度很高，不利于进行自动化单元测试。
工程化要解决的问题：
- 设计前端的架构
- 库/框架的选型
- js/css模块化开发
- 组件化开发
- 静态资源智能化管理
前端工程化方案
前端架构
其中上有的React、Redux、ImmutableJs等框架为该架构的直接依赖。下游为Business Components业务组件和Bussiness Modules业务模块，衔接上下游的，是基础组件。
技术选型
| 场景 | 方案 |
|---|---|
| 开发语言 | ES6+Jsx(React) |
| 模块化CSS | Sass/Less |
| RemoteData | FetchAPI |
| Routing(路由) | react-router |
| I18n | gettext方案 |
| 编译打包 | Babel+webpack |
| Lint | Eslint |
| UT(单元测试) | Mocha+chai+Sinon+Enzyme |
| Demo Server | Nodejs |
JS/CSS模块化开发
模块化最核心的价值在于解决不同文件之间的分工和调用问题，及依赖关系。
JS模块化方案有ES6 Module、AMD、CommonJS等。
CSS模块化方案有less，Sass，stylus等预处理器。
组件化开发
- 页面上的每一个独立的可视/可交互的区域视为一个组件
- 每个组件对应一个工程目录，组件所需的静态资源就近维护。
- 组件具有独立性，组件之间自由组合。
- 页面是组件的容器，负责组合形成完整的界面。
| 名称 | 说明 | 举例 |
|---|---|---|
| JS模块 | 独立的算法和数据单元 | 浏览器环境检测(detect)，网络请求(ajax)，应用配置(config)，DOM操作(dom)，工具函数(utils)，以及组件里的JS单元 |
| CSS模块 | 独立的样式单元 | 栅格系统(grid)，字体图标(icon-fonts)，动画样式(animate)，以及组件里的CSS单元 |
| UI组件 | 独立的可使/可交互单元 | 页头(header)，页尾(footer)，导航栏(nav)，搜索框(search) |
| 页面 | UI组件的容器 | 首页(index)，列表页(list)，用户管理(user) |
整个web应用由多个页面组成：
每个页面由多个组件组成：
综上所述，大致可以规划处源码目录：
静态资源管理
使用Webpack作为前端资源模块化管理和打包工具。Webpack把项目当作一个整体，通过给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
Webpack插件非常多，功能强大，此处不细说。
性能优化
- CDN部署
- 缓存控制
- 文件指纹
- 缓存复用
- 请求合并
- 按需加载
- 同步/异步加载
- HTTP2.0服务端资源推送
- 移动端首屏CSS内嵌
- 延迟加载
- ... ...
