前端工程化

Posted 2022-05-21 xiaoan0705

什么是前端工程化？

web前端这几年飞速发展，以前前端工程师还是一个不受重视的职位，日常工作就是切图、用JQuery写脚本，从某种意义上来世，只是后端的附属物。最近几年，尤其是nodejs的出现，使前端越来越受重视，同时也带来一个问题，前端规模越来越大，如何提高前端工程师的开发效率变得非常重要。这就是前端工程化的目的。

 

前端工程化是将前端开发规范化、标准化，包括开发流程、技术选型、项目测试、项目部署。

前端工程化提倡用完善的流程规范和代码规范来保证大型项目的质量和可维护性。

开发阶段：由于原生html、CSS、JS效率并不高，于是出现了模板、scss、less、typescript等中间型语言用于转义为原生语言，或者将JQuery代替原生JS、在开发阶段希望浏览器自动刷新等。

测试阶段：自动化测试

部署阶段：首先对代码进行压缩，将静态资源部署到静态服务器上，对文件加上md5防止浏览器使旧缓存等。

 

解决前端工程化的问题，可以从开发和部署入手：

开发方面要解决的问题：

（1）提高开发效率

　　比如事件监听从原始DOM到jquery再到Vue；

　　比如为减少请求次数，将多个图片合并成一个雪碧图，通过background-position来使用图片。

（2）降低大型项目的开发难度

　　首先前端工程化提倡模块化、组件化。核心思想是分治

　　模块化和组件化的区别：

　　模块（module）侧重于对属性的封装，重心在设计和开发阶段，而组件侧重于产品的功能性，简单来说，模块是文件资源层面上的，对代码和资源进行拆分，不如js模块、css模块；而组件是对UI或者项目功能进行拆分。

部署方面要解决的问题：

（1）代码审查

（2）压缩打包

（3）单元测试、自动化测试