vue提升性能的几种简单方法

vue提升性能的几种简单方法:

1.vue异步组件实现懒加载
    方法如下:component:resolve=>(require([‘需要加载的路由的地址’]),resolve)
2.使用ES6中的import引入组件
3.尽量使用v-if,减少使用v-show
4.组件拆分,页面分为多个组件
5.使用keep-alive切换路由
6.使用vue-virtual-scroller组件加载内容过多的列表
7.v-for加唯一key
8.长列表使用this.list = Object.freeze(list);冻结数据
9.将树形结构扁平化store数据结构,以免多次循环递归带来性能开销
10.v-for 中避免同时使用 v-if
11.图片懒加载v-lazy
12.理解Vue的生命周期,不要造成内部泄漏,使用过后的全局变量在组件销毁后重新置为null
13.修改vue.config.js中的配置项,把productionSourceMap设置为false,不然最终打包过后会生成一些map文件,并且在生成环境是可以通过map去查看到源码的,这样会造成源码泄漏,这里建议大家设置为false。productionGzip设置为true可以开启gzip压缩,使打包过后体积变小

猜你喜欢

转载自blog.csdn.net/qq_43237014/article/details/112168013