vue性能优化方案（vue前端优化的方法有哪些）

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

01

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

cons ttime = 10* 1000
const interval = setInterval(() => {
   console.log('10秒钟执行一次') xxxxxxxxxx // 要执行的处理}, time)
this.$once('hook:beforeDestroy', () => { clearInterval(interval)})

02

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

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

03

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

importIndex from '@/page/index/index';exportdefaultnewRouter({ routes: [ { path: '/', name: 'Index', component: Index } ]

路由懒加载写法：

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

04

打包优化

(1) 生产环境关闭productionSourceMap

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

(2) 移除console

开发环境为了调试，会添加大量的console.log，但是部署到生产环境不可能一个一个把console.log给手动删除了。这样带来的后果，不仅仅会影响到代码执行性能，而且可能会泄露一些核心数据。在vue.config.js中将drop_console 置为 true，即可实现。