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