先来一组数据

• 使用时长：2年
• 团队人数：4人
• 项目数量：4个
• 最大项目代码量: 33623行
• 最大项目 SFC: 643个
• 最大项目页面: 121个
• 累计编写通用组件：24个
• 通用组件代码量：21748行
• 公开通用组件: 6个

吐槽一下

两年中，团队人员更替，这是每个团队都不想的事，可，无法避免。

我们公司小，团队更小。每个人都有大量的前端开发以后的工作要做。

公司没有严格的代码开发/审查流程，代码风格也是因人而异。

尽管我花时间编写了开发规范，但现在也只是一纸空文，无人问津（声明: 我不是团队领导，我只是负责技术）。

只能尽量在 eslint/pre-commit 上下功夫，进行强制约束。

谁知，有人会将 eslint 给禁用掉。

遇到的问题

网上到处都在讲 Vue 的优点，我就不说了。单纯说说工作上遇到的各种问题。

组件管理

我们的业务系统很复杂，而开发人员能力参差不齐（最重要的是没有代码审查），

导致代码混乱，比如命名不规范，随意性强，滥用组件/混入功能混乱。

随着业务范围增大，混乱越来越严重，积重难返。(这个问题本身和 Vue 是没有关系的)

项目上的真实例子：

我抽象出了一个业务组件，编写了详细的使用文档。可是，就有人根本不看这个文档，

在使用这个组件的时候，不是直接去调用，也不和谁讨论，直接到组件里面去添加东西。

关键是，添加的东西，是不能被抽象的，甚至不需要被共享。

直到有一天我需要向这个组件添加新功能才发现这个问题，可是，已经晚了。

我只能为了兼容这们同学的东西，额外去做一些处理。慢慢地，这个组件，面目全非了。

所以，不要吝啬时间给新人培训，讲解，磨刀不误砍柴工。

性能

项目小的时候根本发现不了，甚至项目大了，在开发机器上都不容易发现的性能问题。

最开始，我们打包的输出，使用了 Vue 的默认配置。

结果，打包后，项目上的代码有 4M（开发时的未压缩代码有 40M 左右）。

当部署到客户那去时，客户一看，首屏要 4 秒才加载完成，这怎么行。

甚至，有的客户电脑使用了国产芯片，(Firefox) 首屏加载竟然要 30 秒甚至直接卡死。

此时才注意到，项目需要优化了。于是，利用 webpackChunkName 进行异步加载，

同时将系统重构为多入口。终于，4 秒变 1 秒，30秒 变 10 秒了，这下客户能接受了。

当然，并不是说这个加载速度就没问题了，只是说优化后的效果，毕竟客户能接受了，

我们做项目的，时间也是有限。

另外，小心使用第三方组件。

项目上的另一个故事：

有一个页面，用表格展示了大量数据。表格中的大部分数据，都支持使用 ElementUI 的 el-input type="textarea" 进行内容编辑。就这么个页面，导致客户的浏览器假死了。

原因找了很久，最后发现是这个组件执行了大量的计算，以修正输入框的大小。

掌握以下技能，Vue 能用得更好

• mixins 混入
• extends 扩展
• render 渲染函数
• slots 插槽
• webpack 打包工具的配置
• import/webpackChunkName 异步加载

分享我们的组件

• @hyjiacan/vue-datepicker
• @hyjiacan/vue-slideout
• @hyjiacan/vue-echarts
• @hyjiacan/vue-ellipsis
• @hyjiacan/vue-timeline
• @hyjiacan/eltable-wrapper