Vue中常见的性能优化

1. 不要将所有的数据都放到 data 中,data 中的数据都会增加 getter 和 setter,又会收集watcher,这样还占内存。不需要响应式的数据我们可以定义在实例上。

2.在 v-for 绑定事件的时候可以使用事件代理,将事件绑定到外层元素上。

3. 使用 keep-alive 缓存组件,防止组件来回的创建和销毁这样浪费性能。

4.使用 v-show 代替 v-if 指令。

5. key 最好保证唯一性,提高 DOM-diff 的复用性能。

6. 合理的使用路由懒加载,异步组件。

7.localStorage,sessionStorage。

8.预渲染插件 prerender-spa-plugin

打包优化:

1)使用 cdn 加载第三方模块

2)多线程打包 happypack

3)splitChunks 抽离公共文件

4)sourceMap 生成源码映射

5)压缩和缓存

posted @ 2020-03-17 11:05  蔚蓝海域234  阅读(1246)  评论(0编辑  收藏  举报