这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战
前端工程化，很多人一听到这个词，想到的就是 webpack；基于现在的环境，这种想法不能说它是错的，但也不是很对，毕竟前端工程化的概念比 webpack 要大的多。
相信很多人都听过一个词，叫 webApp，俗称网页应用，它的前身，叫 webPage，即网页页面。随着浏览器的更新，HTML5新特性的发布，人们开始希望 webPage 应该拥有更强大的功能，以及更多的交互支持。随即出现了很多新的概念，比如 前端路由、离线应用、webSocket、前端存储、前端数据库（indexeddb），也出现很多新的框架，Vue 、React，这也要求前端工程师需要掌握的技术越来越多，也越来越复杂。为了更好的开发前端应用，工程化的思考方式，貌似就成为前端方向的大势所趋。
前端工程化，到底指的是什么？
个人而言，认为前端的工程化，主要会包括下面几个方向
-
技术选型
JS方面：现在前端主要的两大开发框架Vue、React，一个团队如何选择哪个框架更适合自己，是一个值得思考的问题。要基于自身所处在的业务以及环境，去充分考虑。一般来说，React会更适合大型项目，因为它在性能优化的方面，可让开发者参与的程度更高，但也要求开发者的功底更深；而Vue更适合webApp，适合做用户交互多而复杂的应用，而且Vue相对于React来说，学习成本会更低一点；构建工具方面：webpack现在是主流，且功能非常丰富，社区的活跃度也非常不错，所以毋庸置疑，它是首选；但现在也有呼声相对较高的vite出现（可以看这篇文章：实现一个简单的 vite开发版），随着浏览器对ESM的原生支持，vite在后面会不会超过甚至取代webpack，也是需要去思考了；但是这里还是有一个很重要的点，工程化的构建，要求的是稳定，不能耗费过多的时间在非主要业务上 -
制定规范
一个大型项目，必定是多人协同开发，那么制定统一的规范，就是必要的，否则每个人都有自己的格式与规范，这十个人的效率，是不是比得上一个规范健康且完整的三个小队，都是个问题。
开发规范：，可以用EsLint处理提交规范：，可以用husky+commitlint处理注释规范：，可以统一使用jsDoc...等等
-
测试、部署、监控
测试方面，这里可能更多指的是代码的自测，如何让项目成员尽可能的完成代码自测，也是一个需要考虑的事情（没想好）
部署，这里暂且分为：开发环境的部署和生产环境的发布部署。
在开发阶段，如何让成员更高效、简单的完成业务开发，例如可视化页面的创建，MockServe的支持，以及多环境（test、uat、prod）的切换
在生产环境，例如代码提交之后的自动构建，多版本之间的切换，一键部署等功能，上线之后的错误监控，性能监控，埋点数据查看，也是需要去支持和考虑的
-
性能优化
渲染性能：大家都知道，js对于Dom的操作，是会引起页面的重绘的，所以我们在编写代码的时候，要尽量减少Dom的操作，好在
Vue、React基本都已经处理过这些问题；对于长列表、多数据页面，要进行懒加载，或者说分页加载。代码性能：将重复加载的模块，抽离成一个单独的文件是必要的；对于可以被连续触发的函数，节流、防抖也是必要的；在代码的结构、文件层级方面的设计，要基于语义话、通俗易懂的考虑去做
网络性能：有效的利用浏览器缓存是必要的，可以上
CDN；如果对于页面渲染速度要求较高，服务端渲染也是可以考虑的 -
重构
随着业务的发展，重构这个事情，也是可能会遇到的；从之前的
SPA模式，可能需要根据业务、模块转变为MPA多入口、多模块的形式；
小结
所以，前端工程化是包含很多东西，webpack 只是其中能够让工程化更好进行的一个桥梁，上面说到的 技术选型、制定规范、部署、性能优化、网络优化 基本都可以在webpack的配置中得到体现。
