随着浏览器和前端技术的发展，现在的前端项目越来越大、业务也越来越复杂，前端工程化已经成为一件势在必行的事情。
前端工程化其实就是软件工程在前端方向上的实施，不过篇幅有限，本文只讲解其中的几个点。
团队规范
如果前端团队只有一两个人，规范的作用微乎其微；但团队人数超过一定数量时，规范的作用就显现出来了。举个例子，拿代码风格规范来说，有些人喜欢用两个空格缩进，有些人喜欢用四个空格缩进，如果这两个人合作写一个项目，即使嘴上不说，心里也会相互吐槽。所以统一规范是非常有必要的，在制定规范前，大家可以相互讨论，提意见；规范制定后，所有人都得遵守，强制执行。
本文说的规范主要包括以下几种：
- 代码规范
- UI 规范
- 项目结构规范
- git commit 规范
代码规范
代码规范的好处
- 规范的代码可以促进团队合作
- 规范的代码可以降低维护成本
- 规范的代码有助于代码审查
- 养成代码规范的习惯，有助于程序员自身的成长
每个程序员都不喜欢修改别人的代码，无论代码好坏，因为第一眼看上去没有熟悉感，下意识就会排斥。
所以当团队的成员都严格按照代码规范来写代码时，可以保证每个人的代码看起来都像是一个人写的，看别人的代码就像是在看自己的代码。
重要的是我们能够认识到规范的重要性，并坚持规范的开发习惯。
- 百度前端代码规范
- Airbnb 翻译版
- 如何编写高质量代码
UI 规范
UI 规范需要前端、UI、产品沟通，互相商量，最后制定下来，建议使用统一的 UI 组件库。
制定 UI 规范的好处：
- 统一页面 UI 标准，节省 UI 设计时间
- 提高前端开发效率
项目结构规范
项目结构规范包括文件命名、文件目录组织方式，用 Vue 项目举个例子。
代码语言：javascript复制├─public
├─src
├─tests一个项目包含 public（公共资源，不会被 webpack 处理）、src（源码）、tests（测试），其中 src 目录，又可以细分。
代码语言：javascript复制├─api （接口）
├─assets （静态资源）
├─components （公共组件）
├─styles （公共样式）
├─router （路由）
├─store （vuex）
├─utils （工具函数）
└─views （页面）每个前端团队的项目命名及组织方式都可能不一样，以上仅提供参考。
- Vue 风格指南
git commit 规范
良好的 git commit 规范，让人只看描述就能明白这个 commit 是干什么的，提高解决 BUG 的效率。
推荐阅读： git commit 提交规范。
其他规范
除了上述几个规范，还有：
- 前后端接口规范
- 文档规范
- 代码分支规范
...
由于篇幅有限，并且研究不深，就只能到这了。
执行
规范制定下来了，如何保证执行？
基本上都得靠代码审查以及测试人员测试，不过代码规范有一个工具能用得上，那就是 vscode eslint 自动格式化代码。
推荐阅读： ESlint VSCode自动格式化代码(2020)。
性能优化
前端性能优化是一个老生常谈的问题，网上关于性能优化的文章与书籍也有很多。我之前还写过一篇关于 JavaScript 性能优化的文章。
性能优化包括代码优化和非代码优化。
代码优化
- 复用代码
- 避免全局变量
- 使用事件委托
- 使用Object/Array字面量
- 位操作在JavaScript中性能非常快，可以使用位运算来代替纯数学操作
...
非代码优化
- 减少HTTP请求次数
- 使用CDN
- 使用缓存
- 压缩资源
- css 放头部，js 放底部
- 减少 DOM 操作
...
推荐阅读：
- 高性能网站建设指南
- 高性能网站建设进阶指南
- Web性能权威指南
测试
测试是前端工程化建设必不可少的一部分，它的作用就是找出 bug，越早发现 bug，所需要付出的成本就越低。
在前端测试中，单元测试和集成测试一般用得比较多，工具也有很多，例如 Karma Mocha PhantomJS / Chai 等。
但是自动化测试工具可以说几乎没有，因为 UI 界面自动化测试太难了，目前只能靠人工测试。
- 张云龙-如何进行前端自动化测试？
- Jest
- Mocha
- Karma
构建、部署
得益于 node 和 webpack 的发展，自动化构建不再是梦。通过 webpack 以及相关配置，一行命令就可以做到下列所有事情：
- 代码检查
- 单元测试、集成测试
- 语言编译
- 依赖分析、打包、替换等
- 代码压缩、图片压缩等
自动化部署通过 Jenkins、Docker 等工具也可以很方便的实现。
推荐阅读：yumminhuang-如何理解持续集成、持续交付、持续部署？
性能和错误监控
性能监控 前端页面性能是一个非常核心的用户体验指标，影响到了用户的留存率，如果一个页面性能太差，用户等待时间过长，很有可能就直接离开了。
错误监控 因为测试永远无法做到100%覆盖，用户也不会总是按照我们所预期的进行操作，因此当生产环境出现 bug 时，需要对其进行收集。
监控是前端工程化建设中的最后一环，当项目上线后，通过监控系统可以了解到项目在生产环境中的运行情况，开发团队可以根据监控报告对项目做进一步的调整和优化。
目前市面上有大量成熟的监控产品可以使用，对于没有精力开发监控系统的团队来说，可以算是一个好消息。此前我还针对监控系统进行了一番调查和研究，并写了一篇文章，对监控系统原理有兴趣的可以看一下，前端性能和错误监控。
