Vue性能优化

科技 07-01 来源：魔都的世界

浅谈Vue性能优化

引言

日常开发中使用 Vue或其他框架时，难免会遇到一些问题。尽管 Vue内部已经做了许多优化，但我们仍然需要去关注 Vue项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化总结而来，希望广大读者阅读完，受到一定的启发，从而对自己的项目优化起到帮助。

setInterval路由跳转继续运行并没有及时进行销毁比如一些弹幕，走马灯文字，这类需要定时调用的，路由跳转之后，因为组件已经销毁了，但是setInterval还没有销毁，还在后台继续调用，控制台会不断报错，如果运算量大，无法及时清除，会导致严重的页面卡顿。解决办法：在组件生命周期beforeDestroy停止setInterval。

const time = 10* 1000const interval = setInterval(() => { console.log('10秒钟执行一次') xxxxxxxxxx // 要执行的处理}, time)

this.$once('hook:beforeDestroy', () => { clearInterval(interval)})

不需要响应式的数据处理方式在Vue开发中，有一些数据，从始至终都未曾改变过。这种死数据，既然不改变，也就不需要对他做响应式处理，不然只会做一些无用功，消耗性能。比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，就会消耗大量性能。

// 方法一：将数据定义在data之外data () { this.XXXlist = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } this.YYYlist = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx } return {} } // 方法二：Object.freeze()data () { return { XXXlist: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}), YYYlist: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}) } }

路由懒加载当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果把不同路由对应的组件分割成不同的代码块，当路由被访问时才会加载对应的组件，这样就会事半功倍。路由懒加载可以在进入首屏时不用加载过度的资源，从而减少首屏加载速度。非懒加载写法：

import Index from '@/page/index/index';export default new Router({ routes: [ { path: '/', name: 'Index', component: Index } ]

路由懒加载写法：

export default new Router({ routes: [ { path: '/', name: 'Index', component: resolve => require(['@/view/index/index'], resolve) } ]

打包优化

(1) 生产环境关闭productionSourceMap

在vue.config.js设置之后，就不会生成Map文件。Map文件的作用：项目打包后，如果运行时报错，输出的错误信息可以准确得知代码报错的位置。相当于Map文件起到查看源码的作用，如果不需要定位问题，且不想被看到源码，就把productionSourceMap 置为false，这样既可以减少包文件大小和加快打包速度，又可以加密源码。