vue中使用web worker
- 2019 年 10 月 3 日
- 筆記
眾所周知，JavaScript是單執行緒的，一些複雜比較耗時的操作，會阻塞頁面的渲染交互，引起頁面卡頓，影響用戶體驗。web worker是html5的新特性之一，主要就是用來解決此類問題，為頁面額外開啟一個執行緒，用來處理一些比較耗時操作，不影響主執行緒的進行。
在實際vue項目的開發使用過程中，還是遇到不少坑，特別記錄一下。
首先，基本的web worker使用直接調用Worker構造函數，如下：
// url: js文件路徑 // options: 配置資訊 const worker = new Worker(url, options)
其次，不同模組間的通訊主要通過postMessage進行消息推送，通過onmessage進行消息接收，如下所示：
// a.js let worker = new Worker('a.js') worker.postMessage({ method: 'transferLang' }) worker.onmessage = function (e) { init(e.data.params) }
// b.js self.onmessage = ev => { let funName = ev.data.method if (self[funName]) { self[funName](ev.data.params) } else { console.warn(`方法${funName}未定義`) } } self.transferLang = function () { let arr = [] self.postMessage({ params: arr }) }
在vue項目中，如果直接使用，首先遇到的問題是worker文件路徑與打包解析問題，這種首先需要安裝worker-loader,解析web worker，執行以下命令即可：
npm install worker-loader -D
vue.config.js要添加以下配置：
configureWebpack: config => { config.module.rules.push({ test: /.worker.js$/, use: { loader: 'worker-loader', options: { inline: true, name: 'workerName.[hash].js' } } }) },
在使用的時候，就不能調用原生的Worker構造函數了，需要手動import worker文件，然後直接實例化這個文件即可，如下所示：
// a.js import Worker from './b.js' let worker = new Worker()
接著，會發現控制台會報錯，“window is undefined”，這個是因為worker執行緒中不存在window對象，因此不能直接使用，要用this代替，要在vue.config.js中添加以下配置：
chainWebpack: config => { config.output.globalObject('this') }
接著在打包的時候，也會報錯，需要加入以下配置，
parallel: false
完整的webpack配置如下：
module.exports = { configureWebpack: config => { config.module.rules.push({ test: /.worker.js$/, use: { loader: 'worker-loader', options: { inline: true, name: 'workerName.[hash].js' } } }) }, parallel: false, chainWebpack: config => { config.output.globalObject('this') } }
還存在另外一個問題，就是每次修改worker文件時，debugger調試總是保留之前的記錄，感覺編譯的時候存在快取，目前解決辦法是修改worker.js文件名稱，比較繁瑣，如果哪位大神有好的建議，不吝賜教，謝謝！
參考鏈接:
Worker: https://developer.mozilla.org/zh-CN/docs/Web/API/Worker/Worker
Worker loader: https://www.webpackjs.com/loaders/worker-loader/
