浅谈前端工程化

概述

web应用从本质上说就是一种运行在浏览器上的软件，而这些软件的图形化用户界面即为web前端。现如今，web应用更加的复杂，例如社交网络，购物平台，金融信贷等。这样的应用，动辄就是几十上百人一起开发并维护的，其前端界面的规模也极为庞大。与此同时，web应用面对的用户对于前端界面的要求也越来越多。因此，从软件工程化的角度去思考前端开发是大势所趋。

传统方式的不足和待解决的问题

以前，前端资源是按照页面或类似业务页面集合的形式进行组织。例如，manage.js对应着管理界面的交互；user.css对应着用户界面的样式，这种方式在很长一段时间内广泛使用。

存在的不足：

• 前端页面资源冗杂。页面功能越来越多，交互越来越复杂，前端代码量增多。直接导致为了使用一个js中某个函数，可能需要加载整个js文件，或者为了使用部分css样式，需要加载其依赖的整个css，这样无疑会增加请求，影响页面性能。
• 资源维护困难。js和css等资源是依赖于页面或者相似页面集合，它们之间的依赖关系也只能通过人来维护，容易出错，常出现删除某个页面但其相关的资源还存在的情况。
• 不利于单元测试。以页面为最小粒度进行资源整合，不同功能的业务模块相互影响，耦合度很高，不利于进行自动化单元测试。

工程化要解决的问题：

1. 设计前端的架构
2. 库/框架的选型
3. js/css模块化开发
4. 组件化开发
5. 静态资源智能化管理

前端工程化方案

前端架构

其中上有的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内嵌
• 延迟加载
• ... ...