背景
因为公司项目需求需要用到highlight.js，我刚好又在highlight.js的官网上看到可以在 Web Worker 中使用，所以我就心血来潮尝试如何在vuecli5项目中的实践。
构建worker方式
- worker-loader
- webpack5内置方式
技术选择
本来我是想worker-loader的，但是网上基本都说webpack5推出了新的构建worker的方式，刚好又因为vuecli5是基于webpack5的，所以我只能用webpack5内置方式。
- worker.js
import hljs from "highlight.js/lib/core";
import json from "highlight.js/lib/languages/json";
hljs.registerLanguage("json", json);
onmessage = (event) => {
const result = hljs.highlightAuto(event.data, ["json"]);
postMessage(result.value);
};
- 使用方式
this.worker = new Worker(
/* webpackChunkName: "highlight.worker" */ new URL(
"./worker.js",
import.meta.url
)
);
this.worker.onmessage = ({ data }) => {
console.log(data);
};
依赖chunk文件地址错误
方法一，此时可考虑不对依赖进行提取，修改vue.config.js配置
config.optimization.splitChunks({
minChunks: 999999 // 設置為極大值，禁止拆分
});
方法二，修改vue.config.js配置publicPath为auto
具体请这个根据你的项目来选择
参考文献
webpack5 umd打包，使用worker摸索记录 - 掘金 (juejin.cn)
