vue项目浏览器性能造成页面假死，定时器不能准时执行或执行时间有问题,使用worker-loader开启多线程解决

//大版本vue:2    vue-cli:4    webpack:4    worker-loader:3


//安装worker-loader：npm install worker-loader --save-dev


//配置vue.config.js:
//****注意worker-loader需要在js-loader前配置
configureWebpack: {
    module: {
        rules: [
            {
                    test: /\.worker\.js$/,
                    loader: 'worker-loader'
            }
        ]
    }
},
chainWebpack(config) {
        config.module.rule('js').exclude.add(/\.worker\.js$/)
},
parallel: false


//创建file.worker.js文件：
/**
 * worker类
 * export定时器方法
 *
 */
class workerTimer {
    constructor() {}
    timeInterval(name, interval, _this) {
        this[name] = setInterval(() => {
            _this.postMessage({ name: name })
        }, Number(interval))
    }
}

/**
 *通过遍历器遍历参数
 *new出新的worker类
 *调用定时器方法
 */
self.addEventListener(
    'message',
    function (e) {
        e.data.map(item => {
            let workertimer = new workerTimer()
            workertimer.timeInterval(item.name, item.interval, self)
        })
    },
    false
)


//需要使用的.vue文件引入并使用：
import Worker from './file.worker.js'

data() {
    return {
        //可以开启多个多线程
        workerList: [
            { name: 'refreshExpirationTimes', interval: 3000 },
            { name: 'publishPermissionTipsTimes', interval: 3000 }
        ],
        worker: null
    }
},
methods: {
    async refreshExpirationTime() {
    },
    async publishPermissionTipsTime() {
    },
    workerInit() {
        this.worker = new Worker()
        this.worker.postMessage(this.workerList)
        this.worker.onmessage = params => {
            //判断是属于哪个多线程的使用
            if (params.data.name === 'refreshExpirationTimes') {
                this.refreshExpirationTime()
            } else if (params.data.name === 'publishPermissionTipsTimes') {
                this.publishPermissionTipsTime()
            }
        }
    }
},
mounted() {
   this.workerInit()
},
beforeDestroy() {
    //清除多线程
    this.worker.terminate()
}