正值测试阶段，抽时间做一次总结。
由于历史原因，部门的技术栈相对落后且不统一，ng1、react、vue、node、甚至jsp等前后端不分离的比比皆是。但没办法啊，毕竟业务驱动，重构、追赶新技术是需要很大成本的。
米币支付这个项目之前就是前后端不分离的，这次他们希望沿用之前的技术减少时间和人力成本，毕竟前后端分离接口都得改。那我不干啊，好不容易重构了，不向前兼容，怎么还后退了呢。据理力争，找接口协商，最后接口可以完全抽出一个人力配合，才同意前后端分离。本来想采用vue + ts的，但ts被否决了，理由是组内还没有ts的项目，怕后期的维护成本加大，行吧，咱也退一步。
说实话，现在很不屑于做这种项目，没有任何技术难点，没有任何挑战。但没办法，这就是你的工作。
一个多月时间，从项目架构、开发、多语言、CI/CD，错误上报/性能监控全流程搞了一遍，也算摸清了公司的流程。
更细节的内容在组内做了次分享，由于我司对信息安全这一块查的很严，也就不提了。
下面主要说做的性能优化吧，毕竟面试也会关注这一点（有句话：你在这家公司所做的一切都是为下次跳槽做准备），没有实际经验，单靠八股文还是心虚呀。
小文件合并使用 webpackChunkName 注释， 同名的就会合成一个文件
打包后发现有不少几kb的文件，可以将它们合并成一个，以空间换取时间。
合并之后
下面全是Nginx配置。
压缩前：
压缩后：
由Nginx压缩是需要消耗时间和性能的，可以前端进行压缩，然后配置Nginx。
webpack 压缩前后，生成的.gz文件
部署到nginx上。配置nginx，nginx会优先返回资源目录下存在的.gz文件
配置以后我怎么知道返回的压缩文件是由nginx返回的还是前端打包好的呢？
第一步介绍过前端没有打包生成gzip文件之前，由nginx压缩的文件的ETag具有 /W 前缀。
直接返回前端生成的压缩文件，ETag没有 /W 前缀。
下面是Nginx的配置和说明。
因为支付涉及到很多调用方，需要兼容已有的地址，所有路径前缀和资源前缀不一致。关于路径前缀配置在 vue-router 中配置base即可。资源前缀在webpack中配置publicPath。而静态资源都放在服务器的mibi目录下，所以就会有上面html和静态资源的配置不一样的情况。
接口映射是因为前后端分离后，分开部署，所以接口需要做一次转发。
HTTP缓存是性能优化很重要的手段之一。
现在的项目一般都是SPA（多页面也一样），编译打包后生成的静态资源名都带有hash值。所以把html设置成协商缓存。如果资源内容改变，生成新的hash值，资源URL自然也变了，所以js、css、img等设置成强缓存。缓存有效期可以很长，但是也不要太久，一般30天，不然假如频繁更新前端资源，废弃的资源将一直存留在用户的磁盘，会搞死用户的。
以上就是本次项目做的一点性能优化。
Repaint又叫Redraw，重绘，它是指一种不影响当前dom结构的和布局的一种重绘动作。以下的动作都会促发Repaint：
不可见或可见（visibility）
颜色和图片改变（background,border-color,color之类的属性）；
不改变页面元素大小，形状和位置，但改变其外观的变化。
Reflow，又叫重构， 比起 Repaint 来讲就是一种更加显著的变化了。它主要发生在 DOM 树被操作的时候，任何改变 DOM 的结构和布局都会产生 Reflow。但一个元素的 Reflow 操作发生时，它的所有父元素和子元素都会发生 Reflow，最后 Reflow 必然会导致 Repaint 的产生。举例说明，如下动作会产生 Repaint 动作：
浏览器窗口的变化；
DOM 节点的添加删除操作；
一些改变页面元素大小，形状和位置的操作的触发。
减少 Reflow
通过 Reflow 和 Repaint 的介绍可知，每次 Reflow 比其 Repaint 会带来更多的资源消耗，我们应该尽量减少 Reflow 的发生，或者将其转化为只会触发 Repaint 操作的代码。
