Vue + WebWorker 实践

end-less

已于 2024-01-19 17:37:47 修改

阅读量2k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：前端 web worker vue

于 2022-12-23 17:06:54 首次发布

本文链接：https://blog.csdn.net/zg97zb/article/details/128421260

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用WebWorker解决大文件切片上传时的阻塞问题，通过worker-loader和Vue组件，实现了异步处理，显著改善了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：在大文件进行切片上传时，整个过程会产生大量计算，导致阻塞主线程运行，使用户界面不可操作，因此考虑将文件切片的处理过程放到worker线程中进行，以此来缓解主线程压力。

众所周知，JavaScript 是单线程的。一些复杂而又耗时的操作，势必会阻塞页面的渲染/交互，影响用户体验。web worker 允许开发者为页面额外开启一个线程，用来处理复杂而耗时的操作，不会阻塞主线程，从而达到优化用户体验的目的。

在Vue中的使用
1.安装worker-loader

cnpm i -D worker-loader

2.在vue.conf.js中配置loader

module.exports = {
chainWebpack: config => {
    // 将匹配到的文件使用worker-loader处理
    config.module
      .rule('worker')
      .test(/\.worker\.js$/) // 匹配文件名为xxx.worker.js的文件
      .use('worker-loader')
      .loader('worker-loader')
      .end()
    config.module.rule('js').exclude.add(/\.worker\.js$/)
}
}

配置好后重启项目。

3.实例化Worker

新建sliceUpload.worker.js文件，并在vue文件内导入
主线程：

<script>
import Worker from './sliceUpload.worker.js'
export default {
    data() {
        return {
            subWorker: null 
        }
    },
    mounted() {
        this.initWebWorker()
    },
    methods: {
        initWebWorker() {
            // 由于worker-loader的引入，所以在实例化Worker时不用传参
            this.subWorker = new Worker()
            // 向worker线程发送数据
            this.subWorker.postMessage({ a:1, b:2 })
            // 监听worker线程发送回来的数据
            this.subWorker.onmessage = (msg) => {
                // dosomething
            }
        }
    }
}
</script>

worker线程：

// 由于业务需要，我需要引入三方库（ajax和文件切片工具）
// 将文件下载至项目本地的public文件夹下然后使用 importScripts导入脚本

// 由于worker线程没有window上下文,直接引入三方库可能会导致window is not defined错误， 所以在worker线程内定义一个全局变量window防止报错

window = self

importScripts('/script/jquery-nodom.js', '/script/slice.min.js')

// 监听主线程传过来的数据
addEventListener('message', function (e) {
     // dosomething
    // 向主线程发送数据
    postMessage(xxxx)
})

4.进行测试

经过对比使用worker发现，使用worker后文件切片浏览器UI不在卡顿，非常丝滑。