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

625 阅读1分钟

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压缩,使打包过后体积变小