Vue+TypeScript+Web Worker部署实践(Vue-cli)
本文最后更新于 548 天前,其中的信息可能已经有所发展或是发生改变。

内容纲要

背景

页面中的JavaScript是在单一线程中运行的。若页面代码的逻辑过于复杂、或者存在密集计算的情况,容易阻塞其他的方法运行。

对于目前大多数计算机都使用多核CPU,使用单线程模型浪费了许多计算资源。

而Web Worker给了我们一种新的解决办法。

开始

需要的依赖
* worker-loader
* typescript
* promise-worker

npm i -D worker-loader promise-worker

将下列加入vue.config.js


    configureWebpack: config => {
        const configs = {
            plugins: [
                new MonacoEditorPlugin()
            ],
            module: {
                rules: [
                    {
                        test: /\.web\.worker\.ts$/,
                        use: {
                            loader: "worker-loader",
                            options: {
                                inline: true,
                                publicPath: "/"
                            }
                        }
                    },
                    {
                        test: /\.web\.worker\.ts$/,
                        use: ["ts-loader"],
                        exclude: /node_modules/
                    }
                ]
            }
        };
        return configs;
    },

然后,这里以CUP-Online-Judge-NG-FrontEnd举例。

在这里,我们把markdownIt封装为Web Worker, 如下:

import registerPromiseWorker from "promise-worker/register";
import MarkdownIt from "@/lib/markdownIt/markdownIt";

registerPromiseWorker((message) => {
    if (message.type === "render") {
        return MarkdownIt.render(message.content);
    }
    else if (message.type === "renderRaw") {
        return MarkdownIt.renderRaw(message.content);
    }
});

export default {} as typeof Worker & {new (): Worker};

注意 最后要export default {} as typeof Worker & {new (): Worker};,否则会提示没有default module导出。

然后,在需要Web Worker的地方这样用

import Vue from "vue";
import { Component } from "vue-property-decorator";
import PromiseWorker from "promise-worker";
import Worker from "@/worker/markdown.web.worker";

@Component
export default class MarkdownWorkerMixin extends Vue {
    originalWorker = new Worker();
    worker_!: PromiseWorker;

    created () {
        this.worker_ = new PromiseWorker(this.originalWorker);
    }

    beforeDestroy () {
        this.originalWorker.terminate();
    }

    async renderAsync (content: string) {
        return this.worker_.postMessage({
            type: "render",
            content
        });
    }

    async renderRawAsync (content: string) {
        return this.worker_.postMessage({
            type: "renderRaw",
            content
        });
    }
}

这里我们整合promise-worker,方便调用Web Worker的异步方法。
这样就能够通过postMessage像worker发送请求,而该方法返回一个Promise,携带返回的结果。

需要注意的是,这个写法需要关闭parallel,即不能开启并行编译,否则会出现错误。


vue.config.js

module.exports = {
    // some code
        parallel: false
}
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇