文章目录
（1）认识
前端工程体系是一种服务，以项目迭代过程中的前端开发为主要服务对象，涉及开发、构建、部署等环节。
前端工程化不是一个框架或者工具，聚焦的不是某个垂直的研究领域或者特殊的业务类型，而是一种可演化、可扩展的服务，服务的目标是解决前端开发以及前后端协作开发过程中的难点和痛点问题，涵盖项目的起始、开发、测试以及部署环节。工具是前端工程化的实现媒介，规范是工程化的指导方针，工作流程是工程化的外在表现形式以及约束规范的载体。
一个合格的前端工程师应该掌握的技术栈参考。
前端工程师是承载用户层所有功能的资源产出者，不仅是客户端最终呈现给用户的HTML/CSS/JavaScript等资源成品，而且还包括这些资源从零开始到最终产出的生产流水线所涵盖的所有环节。
（2）前端的两次新生
Brendan Eich（JavaScript的发明者）可能也没有想到JavaScript这门第1版只用了10天便完成设计的脚本语言在今天会如此流行。JavaScript目前不仅可以开发传统的Web站点，而且还跨足了手机App、小程序、物联网等开发领域。JavaScript经历过两次革命性的突破，这两次突破也带给了前端两次新生。
【1】第一次新生：AJAX
AJAX技术可以实现异步请求和局部刷新，彻底改变了传统Web站点的交互模式。Web不仅是供静态展示的网站，而且是一种由浏览器展现、资源寄存于Internet的应用程序。以此为契机，Web开发者开始在AJAX技术的基础之上探索和开发更加丰富的功能和优雅的用户体验。与此同时，用户对Web应用的需求也不断提高，这间接推动了Web技术的发展。
【2】第二次新生：Node.js
Node.js带来的改革不仅仅是让JavaScript进入了服务器端开发领域，更重要的意义是丰富了JavaScript的生态。JavaScript能做的事情越来越多，业内泛起了JavaScript学习潮，这在一定程度上加速了ECMAScript规范的迭代。
（3）SPA（Single Page Application，单页应用）
随着个人终端设备和浏览器性能的不断提升，Web开发者尝试将渲染以及路由工作交给客户端，服务器端RESTFul API只提供渲染HTML所需的JSON数据。这种形态的Web应用被称为SPA（Single Page Application，单页应用）
【优点】
·减轻了服务器的资源消耗。·与HTML文档比起来，JSON数据的体积小很多，减少了网络请求的时间消耗。·页面路由控制更快速灵活。·可以离线使用。
【缺点】
浏览器需要等待JavaScript文件加载完成之后才可以渲染后续的HTML文档内容，用户在等待的过程中页面是空白的，这就是我们在进行Web产品性能评估时经常谈到的“白屏时间”；其次，由于客户端和服务器端编程语言不同，可能会存在一些诸如数据格式的差异，甚至路由逻辑冲突，比如vue-router history模式的路由，这些问题增加了维护难度；最后，SPA不利于常规的SEO。
（4）前后端分离
从传统网站到SPA再到同构JavaScript，前端工程师的工作内容不断加重，客户端逻辑不断复杂化。原始的前后端耦合的串行开发流程已经不能满足Web产品快速的迭代需求，Web开发者们开始尝试在开发、测试和部署等各个环节寻求更高效的协作方式。前后端分离似乎就是解决这个问题的“银弹”。
顾名思义，所谓前后端分离指的是通过将前端工程师与后端工程师进行明确、合理的分工，改善前后端协作中拖慢开发进度的环节，提高工作效率。前后端分离的核心是解耦。从开发、测试以及部署3个角度看，前后端分离对工作效率的提升如下。
【1】从开发角度来讲，前后端分离的宗旨是实现并行开发，缩短开发周期。
【2】从测试角度来讲，前后端分离令前端工程师和后端工程师更快速、精准地对问题进行定位。
【3】从部署角度来讲，前后端分离将静态文件和动态文件分离部署并结合回滚策略，简化了部署流程，增强了应用程序的健壮性。
（5）前端工程化
前端工程化的衡量准则
前端工程化的主要目标是解放生产力、提高生产效率。通过制定一系列的规范，借助工具和框架解决前端开发以及前后端协作开发过程中的痛点和难点问题。
我们从开发、测试和部署3个角度分析了前后端分离对于工作效率的提升，既然前后端分离是前端工程化方案的指导方针，这三者也就成为衡量前端工程化方案是否合格的重要因素。具体的衡量标准就是我们常说的3个字：快、准、稳。
开发速度是Web产品迭代最迫切提升，也是催生开发人员与产品经理、项目经理以及测试人员之间矛盾的主要因素，自然也是衡量前端工程化方案最直观、最明显的标准。工程化方案的核心目标之一就是在保证质量的前提下，尽可能提高产品的开发速度。
测试的“快”体现在前端工程师和服务器端工程师并行开发完成之后的集成测试阶段。
部署是一个完整迭代周期的最终阶段。经历了漫长的开发和测试，团队中的所有成员都希望自己的产品能够第一时间完美无误地出现在用户面前。部署并不是简单地把文件“放到”线上就可以了，还需要考虑用户客户端的缓存是否影响了新版本的展现、考虑测试用例没有覆盖100%情况下的危机处理、考虑不同地区开放不同版本等。如果你想将Web产品稳稳地呈现给用户，部署环节必须把好最后也是最关键的一关。
前端工程化的进化历程
混沌形态
我们不妨将这种“前端写demo，后端写逻辑、套模板”的开发模式称为“混沌形态”。 这种形态的时代背景是Web产品的逻辑和交互普遍比较简单，前端工程师这一专业岗位刚刚兴起，但是负责的工作仅仅是样式以及部分动画逻辑。前端工程师与后端工程师之间的协作是串行的。
前后端分离形态
催动前端开发第一次进化的关键技术是AJAX。AJAX技术的问世不仅改变了Web页面的交互模式，也间接提高了用户对Web产品的需求，从而促进了前端逻辑的不断复杂化。服务器端工程师负责前端逻辑开发的混沌形态被打破，因为服务器端逻辑本身便具备高度的复杂度，再加上复杂的前端逻辑，自然不堪重负。所以，工程师开始思考改变原有的分工模式：前端逻辑、样式和HTML全部交由前端工程师开发。这是催生前端工程化萌芽的关键一步。
【当前情况下存在的问题点】
开发层面
ES规范与浏览器兼容性不一致。
CSS的弱编程能力。
资源定位。
图片压缩/base64内嵌/CSS Sprites。
模块依赖分析和压缩打包。
协作层面
JavaScript部分逻辑依赖接口API。
部署层面
部分资源需要借助后端工程师部署。
在开发层面问题的描述中反复提到一个词——工具。开发者采用各种各样的专业工具解决对应的需求，比如使用Babel进行ES规范的转译、使用LESS/SASS编译工具进行预编译语法转译、使用r.js解决AMD模块的压缩打包等。将所有工具的功能进行整合并统一为规范的工具栈（请注意不是将工具整合，而是将功能整合），这就是前端工程化的第一步：构建。
构建流程的加入提高了前端工程师单方面的工作效率，下一步是思考如何提高整体团队的效率，也就是在前后端协作开发过程中遇到的问题。最典型的就是前端逻辑依赖后端接口的实现进度，这种串行的工作流程对于开发进度的影响是非常大的。所以，接下来首当其冲的便是解决前后端工程师并行开发的问题。
本地开发服务器并不是工具，而是一个真正意义上的Web服务。本地服务器最典型的应用是Mock服务，通过提供模拟接口和数据解决前端JavaScript对数据API的依赖问题，从而实现前后端并行开发，前提是前后端工程师在进入开发阶段之前需要协商制定接口API的详细规范。
此外，本地服务器与构建功能相结合，可以提供动态构建、浏览器自动刷新等功能，这进一步提高了前端工程师的工作效率。前端工程化发展到这个阶段，我们解决了开发以及协作层面的问题，留到最后的只有部署了。
我们设想一下这种场景：前端代码中出现了Bug，前端工程师修复后仍需要麻烦后端工程师进行部署。前端的Bug有时候可以细微到像素级别，即使再小的Bug也需要调动前后端工程师来修复，这样的工作效率是非常低下的。所以优化部署的基本原则是，确保单方问题的修复不需要调动多方资源。具体的解决方案就是静态资源与动态资源分离部署。动静态资源的分离部署可以解耦前后端工程师的部署行为，两者可以对自身的产出进行独立部署。减少了耦合工作，就提高了迭代和维护效率。同时，动静态资源分离部署也是Web应用架构优化的一个必要策略。