vue 项目优化方案

1、在路由离开的时候清除比较大的数组，对象等 即可以置空 比如列表展示中的数组，对象，或者页面用

this.$options.data().对象  重新赋值一下也行

2、每一个vue页面必须要添加一个name属性

 

大数据用对象如果只是展示而不修改的可以用Object.freeze（）给冻结了，这样也能加快速度例如：

另外：

 

 

优化方案：

1、数据静态化、数据冻结，减少js性能消耗。

解决方案：
（1）使用Object.freeze()冻结大对象和数据，使对象不再参与响应式追踪变化。

（2）对data中的数据进行分析，将部分不参与虚拟dom渲染的数据提出来，放在beforeCreate钩子函数中，不递归设置getter和setter，将数据局静态化，减少性能消耗。

方案一相比方案2更加极端，方案2不设置getter个setter，但是可以更改值，参与逻辑计算。 Object.freeze()则不能对其子属性做任何更改，但是可以替换数据对象本身，同时可以被响应式系统追踪，触发vm渲染。

2、修改modal渲染规则，减少dom渲染量。

iview Modal在进行渲染时，不管窗体是否弹出，都会将dom绘制出来。由于Modal默认transfer为true，导致dom都渲染在body标签下，消耗性能。

解决方案：
（1）修改默认transfer为false。

（2）在弹窗未弹出时，不渲染Modal内部的主体内容。

3、修改部分页面transfer渲染规则，减少dom渲染。

解决方案： 在鼠标经过时在渲染dom。

4、统计超时接口，配合服务端优化。

其他已做的优化：

1、 添加中间状态，关键数据分页，路由离开清空大对象，优化标签渲染逻辑等。

1、之前的订单未做分页，导致订单指派数据量非常大，未做分页时卡顿严重。解决办法：页面做分页处理。

2、订单数据在离开页面时清空，再次进入时重新请求，以减少内存消耗。

3、标签渲染逻辑修改，再点击标签之后，首先进行类名赋值，从视觉上解决卡顿问题。

2、 缓存优化，在关闭标签时，将当前页面排除缓存。

解决方案：使用keep-alive的exclude，在关闭页面标签的时候，将缓存的路由组件实例销毁。

如图，路由实例对应的标签已经关闭，但是组件还在内存中保存着，导致系统保存的组件越来越多，出现卡顿现象。

给keep-alive添加exclude属性，点击关闭销毁：

当组件在exclude数组中时，当前组件不再被缓存，如果再次打开的话，不进行缓存是不符合逻辑的。因此，需要在打开路由时，将exclude中的当前组件名排除，再次进行缓存。

监控路由，触发方法传值给父组件：

将当前组件名排除，即可再次缓存页面。

3、 使用gzip压缩。

普通wabpack项目配置：

使用compression-webpack-plugin，webpack.prod.js作如下配置

然后引入相关资源即可。注意，要带上版本号。有些cdn有限制，需要自己打开后上传到我们自己的oss上才能正常使用。

5、 框架升级。

6、 数据静态化（https://juejin.im/post/5d879243e51d456205410489），数据对象冻结

Object.freeze()之前的跑男列表从点击跳转到组件actived时间间隔