前端工程化建设

更多文章

随着浏览器和前端技术的发展，如今的前端项目愈来愈大、业务也愈来愈复杂，前端工程化已经成为一件势在必行的事情。

前端工程化其实就是软件工程在前端方向上的实施，不过篇幅有限，本文只讲解其中的几个点。

团队规范

若是前端团队只有一两我的，规范的做用微乎其微；但团队人数超过必定数量时，规范的做用就显现出来了。举个例子，拿代码风格规范来讲，有些人喜欢用两个空格缩进，有些人喜欢用四个空格缩进，若是这两我的合做写一个项目，即便嘴上不说，内心也会相互吐槽。因此统一规范是很是有必要的，在制定规范前，你们能够相互讨论，提意见；规范制定后，全部人都得遵照，强制执行。

本文说的规范主要包括如下几种：

• 代码规范
• UI 规范
• 项目结构规范
• git commit 规范

代码规范

代码规范的好处

• 规范的代码能够促进团队合做
• 规范的代码能够下降维护成本
• 规范的代码有助于代码审查
• 养成代码规范的习惯，有助于程序员自身的成长

每一个程序员都不喜欢修改别人的代码，不管代码好坏，由于第一眼看上去没有熟悉感，下意识就会排斥。

因此当团队的成员都严格按照代码规范来写代码时，能够保证每一个人的代码看起来都像是一我的写的，看别人的代码就像是在看本身的代码。

重要的是咱们可以认识到规范的重要性，并坚持规范的开发习惯。

• 百度前端代码规范
• 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 （页面）

每一个前端团队的项目命名及组织方式均可能不同，以上仅提供参考。

• 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 时，须要对其进行收集。

监控是前端工程化建设中的最后一环，当项目上线后，经过监控系统能够了解到项目在生产环境中的运行状况，开发团队能够根据监控报告对项目作进一步的调整和优化。

目前市面上有大量成熟的监控产品可使用，对于没有精力开发监控系统的团队来讲，能够算是一个好消息。此前我还针对监控系统进行了一番调查和研究，并写了一篇文章，对监控系统原理有兴趣的能够看一下，前端性能和错误监控。