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