使用web worker可避免prettier/eslint阻塞ui：需加载浏览器版库、通过postmessage通信、禁止dom操作、禁用不兼容插件，并对长代码做局部格式化。
直接在主线程执行代码格式化（如 Prettier）或静态检查（如 ESLint）会阻塞 UI，导致页面卡顿甚至无响应。HTML5 Web Worker 提供了将这类 CPU 密集型任务移出主线程的可靠方案——关键在于合理拆分逻辑、安全通信，并适配浏览器环境限制。
Worker 中加载并运行 Prettier/ESLint 的核心要点
浏览器中无法直接 require npm 包，必须使用已打包为浏览器可用格式的版本：
- Prettier 官方提供
prettier/parser-*和prettier/standalone浏览器版，推荐用 standalone.js（含核心 + 常用解析器） - ESLint 不原生支持浏览器，需用社区构建版如 eslint-browser 或自行用 Rollup/Webpack 打包精简版（仅保留 CLIEngine + 必要规则）
- Worker 脚本中通过
importScripts()加载外部 JS，顺序重要：先加载 Prettier，再加载 ESLint（若需协同）
主线程与 Worker 的通信设计
避免频繁传递大体积源码或 AST，采用“请求-响应”单次事务模型：
- 主线程用
worker.postMessage({ type: 'format', code: '...', options: {...} }) - Worker 接收后调用
prettier.format()，捕获异常并统一返回结构化结果：{ type: 'format-result', success: true, code: '...', error: null } - 对 Lint，返回
{ type: 'lint-result', messages: [...], errorCount: 0 }，不返回原始 AST 或 RuleTester 实例（体积大且无必要） - 禁止在 Worker 中操作 DOM —— 所有 UI 更新（如高亮错误行）由主线程根据返回消息处理
规避常见坑：路径、插件与性能
Worker 是独立上下文，没有 window、document，也不支持 Node.js 内置模块：
- ESLint 规则中禁用依赖文件系统（
fs）、网络（fetch）或动态require的插件（如eslint-plugin-import的路径解析） - 自定义 parser（如
@typescript-eslint/parser）需单独打包为 UMD/ESM 浏览器可用版，并在 Worker 中显式注册：prettier.registerParser('typescript', tsParser) - 对超长代码（>10k 行），启用
prettier.format()的rangeStart/rangeEnd参数做局部格式化，降低延迟
一个最小可运行示例结构
主线程（index.html）创建 Worker 并监听：
<script><br> const worker = new Worker('formatter-worker.js');<br> worker.postMessage({ type: 'format', code: 'function foo() {return 1;}', parser: 'babel' });<br> worker.onmessage = ({ data }) => {<br> if (data.type === 'format-result') console.log('Formatted:', data.code);<br> };<br> </script>Worker（formatter-worker.js）加载并执行：
importScripts('https://www.php.cn/link/b772565da6893753972235a882ae699e');self.onmessage = async ({ data }) => {
if (data.type === 'format') {
try {
const formatted = await prettier.format(data.code, {
parser: data.parser,
plugins: prettierPlugins
});
self.postMessage({ type: 'format-result', success: true, code: formatted });
} catch (e) {
self.postMessage({ type: 'format-result', success: false, error: e.message });
}
}
};
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
