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)压缩和缓存

猜你喜欢

转载自www.cnblogs.com/xsx123-/p/12509325.html