|
前端工程化就是通过各种工具和技术，提升前端开发效率的过程。这句话有两个含义：1：前端工程化的内容：各种工具和技术；2：前端工程化的作用：通过使用工具，提升开发效率。
工程化解决的问题是，如何提高编码、测试、维护阶段的生产效率。
我们先来考虑一个问题，前端开发中会不会涉及业务？前端工程师是否需要考虑服务端的业务逻辑？要不要将一部分的业务放到前端来实现？
随着需求的增加，不仅要做Web应用，还要做App、小程序以及各种端。当下需求的不断攀升例如，解决代码冗余，项目可维护性，提升版本迭代速度等等一系列的问题。一种新的前端优化概念应用而生。
实现前端工程化的基础——前后端分离
传统模式下的协作开发效率非常低，例如整个项目中仅仅是1像素的偏差，就有可能要调动整个开发团队来处理这1像素的问题，极大的浪费了团队资源。
上诉的例子，仅是冰山一角，面对这么多的问题，前后端分离开发也就提上日程。前后端分离开发，为前端工程化的发展提供了生存的土壤。随着市场需求的不断变化，前端开发从传统的WebPage模式，转变到WebApp模式，Web产品形态的变化也不断推动着前端工程师的工作内容发生变化。在应对各种“变化”，前端工程师们也要设计出自己的前端开发“方法论”。
前端工程化的主要目标就是解放生产力、提高生产效率。通过制定一系列的规范，借助工具和框架解决前端开发以及前后端协作过程中的痛点和难度问题。
如何实施前端工程化？
明确前后端开发的分工，是实现前后端分离的第一步。也是后面实现前端各种优化方案的基础。
前端工程师主要负责的内容包括：
静态资源和动态资源的处理；
JavaScript实现前端业务逻辑；
HTML模板文件的产出；
中间层Web服务，一般由Node.js实现；
前端单元测试；
前端项目部署；
从项目开发的整体环节来说，实现前端工程化还需要熟练以下几个方面其中之一
使用Webpack实现项目构建
构建，简单来说就是编译，前端开发的所有文件最终归属是要交给浏览器去解析、渲染，并将页面呈现给用户，构建就是将前端开发中的所有源代码转化为宿主浏览器可以执行的代码。前端构建产出的资源文件只有三种，HTML、CSS、JS文件。需要完成编译的内容有：
无法被浏览器直接识别的JS代码，包括ES6/7/8/9/10等符合ECMAScript规范的JS代码；
无法被浏览器直接识别的CSS代码，包括SASS/LESS等预编译的CSS语法；
无法被浏览器识别的HTML模板代码，包括jade、ejs、artTemplate、mustache等Node.js模板引擎；
项目构建其实就是为了弥补浏览器自身的缺陷和不足，是一种面向语言的编译过程。那么，除了针对语言本身之外，前端的构建还应该考虑到Web应用的性能优化。这些优化主要是为了减少HTTP请求，提升用户体验。
 |
