前端工程化概述

前端发展史

• 后端生成页面，由浏览器展现
• 后端为主的MVC模式，有了Web Server层概念。比如Spring MVC

缺点：1)、依赖开发环境；2)、前后端职责纠缠不清，可维护性极差

• Ajax带来的SPA(Single Page Application 单页面应用)

问题：1）、前后端接口约定；2）、前端开发负责度大大增加

• 前端为主的MVC、MV**模式。比如： AngularJS、React、Vue等
• Node全栈。比如：阿里巴巴的中途岛计划

前后端分离后，前端Front-end负责视图层的渲染和采集输入信息，后端Back-end负责控制业务逻辑

前端工程化概念

工程化即系统化、模块化、规范化的一个过程。如果说计算机科学要解决的是系统的某个具体问题，或者更通俗点说是面向编码的，那么工程化要解决的是如何提高整个系统生产效率。

工程化解决的问题是，如何提高编码、测试、维护阶段的生产效率。

工程化步骤

1. 开发规范
   1. 编码规范：包括目录/文件命名规范和编码规范
   2. 开发流程规范
   3. 前后端接口规范
   4. 其他文档规范
2. 使用版本控制工具：Git/SVN
3. 使用合适的前端技术和框架
4. 引入单元测试，提交代码质量
5. 通过自动化的工程工具提升开发、部署效率：Webpack

工程化编码方案

当我们要开发一款完整的Web应用时，前端将面临更多的工程问题，比如： 

• 大体量：多功能、多页面、多状态、多系统； 
• 大规模：多人甚至多团队合作开发； 
• 高性能：CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载、同步/异步加载、移动端首屏CSS内嵌、HTTP 2.0服务端资源推送。

此时需要模块化/组件化开发和资源管理

模块化和组件化

实现代码复用的同时分而治之

模块化

JS模块化：AMD、CommonJS、UMD、ES6 Module

CSS模块化：Less、Sass、Stylus

组件化

页面上每个独立的、可视/可交互区域位一个组件

每个组件对应一个工程目录，该组件所有资源都在该目录下维护，组件内部仍然结构、样式、动作分离

组件和组件之间可以自由组合

页面时组件的容器，负责整合组件，形成完整的页面

当不需要某个组件时，可以整个目录删除/替换

资源管理

根据“增量”的原则，我们应该精心规划每个页面的资源加载策略，使得用户无论访问哪个页面都能按需加载页面所需资源，没访问过的无需加载，访问过的可以缓存复用，最终带来流畅的应用体验。

由增量原则引申的前端优化技巧成为了性能优化的核心: 按需加载 、延迟加载 、预加载 、请求合并