chainWebpack配置WebWorkers

清风笑～

已于 2022-11-15 10:16:29 修改

阅读量3.2k

点赞数

分类专栏： js前端 webpack react-native，react，vue 文章标签： javascript vue.js reactjs typescript

于 2021-02-20 12:01:53 首次发布

本文链接：https://blog.csdn.net/ling369523246/article/details/113877762

版权

本文介绍了如何在UmiJS项目中使用WebWorkers，通过chainWebpack配置worker-plugin以及基于worker-loader的方法。在使用worker-plugin的过程中，详细展示了配置步骤和代码实现，但在使用worker-loader时遇到webpack编译错误，期待解决方案。

摘要由CSDN通过智能技术生成

WebWorker作为浏览器开启子线程的一种新方式，Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。

一、UmiJS中配置使用WebWorkers在chainWebpack里面基于worker-plugin配置首先 npm 依赖

npm install -D worker-plugin

config.ts文件里配置chainWebpack中配置

import WorkerPlugin from 'worker-plugin';

export default defineConfig({
   
  hash: true,
  antd: {
   },
  dva: {
   
    hmr: true,
  },
  history: {
   
    type: 'browser',
  },
  locale: {
   
    // default zh-CN
    default: 'zh-CN',
    antd: true,
    // default true, when it is true, will use `navigator.language` overwrite default
    baseNavigator: true,
  },
  dynamicImport: {
   
    loading: '@/components/PageLoading/index',
  },
  targets: {
   
    ie