Recently, I was making a function to output recordings into MP3, and I used the Mp3LameEncoder. Min.js found on worker and Github in vue project, which was actually corrupted.

The use of the worker

Vue. Config. Js configuration

  1. You need to install it firstworker-loaderAnd configure vue.config.js
yarn add worker-loader -D

// vue.config.js
module.exports = {
    chainWebpack: config= > {
		config.module
			.rule('worker')
			.test(/\.worker\.js$/)
			.use('worker')
			.loader('worker-loader')
            Options ({inline: 'fallback'}) // This configuration is a pit, do not add}}Copy the code

Preparing worker files

  • In worker’s scope (?) Inside, there’s no window document. Instead, use self, which is equivalent to an existence of this, referring to the worker thread.
  • Woker havepostMessageMethod and the onMessage property to output and listen for input
// foo.worker.js
// call with an anonymous function; (function () {
  self.onmessage = e= > {
    E is the event object MessageEvent
    // e.ata is the content that is uploaded to worker from outside, if {a: 1}
    console.log(e.data) // { a: 1 }
    /* do something */
  }

  setTimeout(() = > {
    self.postMessage({ b: 1})},3000)
})()
Copy the code

The use of the worker

For more information about worker, see Ruan Yifeng’s article on worker

  • Worker value transfer is a copying process, which is probably first serialized and then restored inside the worker. It’s not passing address values
  • Therefore, after being introduced into the worker, the external modification object will not change the data in the worker, which can be said to be a one-time transaction, and the external management will not be able to do after the transaction.
  • What happens if you pass a function? I tried it and the answer is that postMessage will report an error.
/* In files where worker is needed */
// Import the worker file
import myWorker from 'foo.worker.js'

const worker = new myWorker()

worker.postMessage({ a: 1 })
worker.onmessage = e= > {
  // e is the event object of worker MessageEvent
  // the same concept as onclick event objects
  // e.ata, if passed {b: 1}
  console.log(e, e.data) // MessageEvent, { b: 1 }
  /* do something */
}
Copy the code

In this way, the simple worker is implemented.

importScripts

Because the encoding method for processing audio stream needs to be introduced, import and require cannot be used inside worker. After a round of lookup, you need to use importScripts(XXX).

XXX is the address of the reference file. Test does not support relative paths. Maybe I could have used an HTTP address, but I didn’t. I don’t know what the problem is. If you simply type the file importSCripts(a.js), this is where the pit appears.

Remember when you first configured vue.config.js inline: ‘fallback’? The worker will be packaged as a blob. The default value is undefined.

Once the DIST packaged by VUE is put on the server after setting, the worker will request/AB48a7C5-100F-40Ee-8DC2-0a2a6C568678, and then it will definitely fail to request, and an error will be reported.

Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The URL 'a.js' is invalid.
Copy the code

If worker is not configured, the importScripts request address is js/a.js, and the back end gets js/a.js, so vue packages dist/ JS and manually places a.js in dist/ JS.

A simple demo, including the server server, simply deploy dist to the server, you can see the requested URL. You can also view network requests in the browser’s Network.

I put a copy of the DIST file into the server folder and put my own A.JS. There is no A. JS file in the dist folder packaged by Vue. Because it cannot be packaged, yarn Serve cannot use importScripts properly during development.

Start the server CD Server node index.js Root directory yarn Build YARN serveCopy the code

Note: If you want to test and repackage yourself, delete the.cache folder in the node_modules file, otherwise packing won’t generate worker files.