前言

最近呢筛选了很多候选人的简历, 看到很多对于前端工程化的形容:
> "集体始终致力于前端工程化..."
> "在公司前端工程化标准, 自动化.. 方面的建设做出了微小改革..."
...

首先我抱有的心愿很大(人才嘛谁能不爱..)
而后呢通过交换探讨给我带来更多的反馈是悲观。当然这个畛域是 ` 非主流前端畛域 `。然而集体感觉还是很有趣味而且有必要进行学习的; 所以明天笔者简略的聊一下前端工程化, 心愿能给大家带来帮忙。

回顾一下前端发展史

笔者为了关照到不同时间段融入前端小家庭的读者, 这边对于前端研发 ” 形式 ” 倒退进行一个简略的回顾; 回顾经验过几个阶段, 从而理解 ” 工程化 ” 提出的必要性。

1. 前后端不拆散的时代 : 那时候所谓的前端负责的工作更多是写页面。而后还有就是通过一些技术(ASP,JSP…) 将数据进行页面填充; 波及到这部分技术更偏差于后端，所以前端可能也不并会波及到这部分工作。(当然也会有扯皮的时候, 谁都不违心干。。那就是看谁没话语权咯)
2. 前后端半拆散时代: 在一部分工作俩边扯来扯去的背景下, 就钻研着如何进行前后端拆散, 不便更好的实现团队之间的合作分工。进去很多技术计划 比方在 node 倒退的背景下呈现 SSR(server side render) + Node 的技术计划; 就是服务端将解决好的 html 模板间接给到前端, 前端负责展现。
3. 前后端逐渐齐全拆散 : 在各种技术的推动下缓缓呈现了逐渐前后端齐全拆散的各类架构计划例如 RESTful 架构; 也就是单方通过协定(http/https/socket) 进行调用进行通信数据传输。这样的话彼此的工作可能就不会有太多的扯皮。然而随同还有一些问题, 比方 API 的设计谁来定的问题, 前端定义接口的话可能会更理想化(服务端那边呢有外部的一个大的技术架构服务比方跨集群这些, 在这个背景下可能实现的确会比拟艰难 [也要帮后端兄弟说句话 哈哈.]); 所以集体认为更多的是单方正当的探讨设计来进行推动。
4. ….

什么是前端工程化?

在研发技术计划的日益更新背景下。前端曾经从 ”page 开发工程师 ” 逐渐变成了 ”app 研发工程师 ”; 前端的工作随着业务的简单, 用户的体验晋升曾经不是一个简略的工作了, 面临着单干问题, 性能问题等等 … 所以在模式转变下随同着迎来很多问题:

1. 如何提供团队开发效率?
2. 如何进步我的项目研发品质?
3. 如何增强我的项目可维护性?
4. 如何引进更多的人才?
5. …

为了解决呈现的一系列问题就须要选取好的技术架构计划, 推动前端工程化的落地。工程化大略蕴含几个方面呢?

1. 整体规范化

   • 编码标准: 我的项目构造标准;html,js,css 编码标准; 命名标准; 接口标准等等。
   • 协同标准: 文档标准; 资源管理标准; 视觉 | 交互标准等等

2. 开发模式组件化

   • 模块组件化: 公共 css 提取; 公共 js 提取; 公共资源提取等等
   • 技术组件化:base 函数库组件化; 公共 page 组件化等等
   • 业务型组件化: 同类业务重叠性能组件化等等

3. 工具化 & 自动化

   • 研发工具化: 资源加载整合
   • 自动化构建研发生成环境
   • 自动化部署, 单元测试
   • 继续化集成 …

4. 技术优化, 性能优化, 计划优化 …

   • 技术优化 大前端的背景下 肯定要技术革新提高 别还是冷兵器时代 Jquery一把梭; MVC MVVM 的设计模式的劣势置信大家都是显而易见, 那么为什么不抉择提高呢。
   • 性能优化 2C 的业务下这个是必然会经验的一个阶段, 用户的体验越来越重要。思考的不光是程序的实现还有用户的体验简略来说一个首屏加载的工夫可能就会导致用户的散失。
   • 计划优化 这方面比方团队来说并不一定有机会推广工程化每一个细节的落地, 强行推这个整体方向可能会事与愿违; 没有最好的只有最合适的。

工程可能解决什么?

上面通过一个简略的日常景象看一下可能帮咱们解决什么问题.

首先在非工具化 (webpack 构建生成) 的背景下很多研发人员都会遇到一个问题。每次我的项目部署的时候须要使用者 (测试, 产品, 用户) 去手动清理浏览器的缓存; 这就是一个很头疼的问题; 每次解释也挺累的。” 动态资源要清下缓存 …” 那么如何从工程方面解决这个问题呢?

...
<link herf ="XXXX.css">
...
<script src="XXX.js">
....

如上代码看起来是没有什么问题 为什么程序须要每次去清理浏览器缓存呢。起因是古代浏览器为了性能, 开销方面的思考。解决资源加载问题做出了缓存机制 雷同动态资源会做出本地的缓存。那么如何解决这个问题呢? 很简略请看上面伪代码：

...
<link herf ="XXXX?+'new Date()'.css">
...
<script src="XXX?+'new Date()'+.js">
// 不能这样写哈 示意
....

很多仔细的同学在构建工程生产打包的时候曾经看到了比方 webpack 打包它的文件生成个别是"chunk" + hash + .js/css 就是和下面一个解决思路。然而又有问题了 如何决定每个文件到底需不需要进行缓存的问题来做性能优化呢? 比方一些图片啊这些就不须要每次从新载入多节约带宽资源啊? 这个问题留给大家思考一下。或者看一下 webpack 这些构建工具是如何解决的。

完结啦

前端工程化的必要性以及对于集体的成长是起到了很大的作用; 置信大家都有了些许理解。

最初笔者认为大家有必要去学习一下。也能在简历下面显得不那么枯燥。很多人就只会写 ” 精通各种语言, 相熟各种技术 …”。哎呀这样只会让你的面试官更加的刁难你。每个语言设计者可能都不敢说本人对于每天在变新的语言每个细节都相熟。比方就 JavaScript 来说在日益倒退背景下光规范就几百页; 谁能记得过去。要学会造就本人语言外的工程能力, 架构能力。。加油~ 有任何须要交换的随时留言。