你可能不须要work-loader来处理worker

相信不少人为了在webpack开发的时候使用 web-worker 而使用了 worker-loader 去进行处理，可是这个 loader 也存在一些问题，其实在webpack下不经过 worker-loader 也是可使用的，仅仅须要很是简单的配置就能够。

背景：在多个worker中使用相同的包，最终build后，每一个使用的worker中都集成了相同的第三方包，致使打包出来的 app.js 体积暴增，相同的第三方包没法抽离的状况。因此须要将这种方式剔除掉。而且该loader在github上的issue不少问题都没人解决，并非很稳定。因而决定替换成web-worker原生方式

未抽离worker-loader时打包出来的包状况

从上图能够看出，同一个 xlsx-populate.min.js 包，在worker中使用后，和worker的逻辑代码打包到了一块儿，在非 worker 中使用则被抽离到了 vendor 中，等于多打包了一次，若是多个worker都要用到这个包，那就每一个worker都会打包一次。想一想均可怕。。。

抽离worker-loader后打包出来的状况

从上面打包后的结果来看 xlsx-populate 这个包已经不存在了，整个app.js 的体积明显减小。

解决思路： 既然使用原生 web-worker 方式，那么在worker中引入第三方包的话，就只能使用远程资源的方式了，相应的其余地方用到 这个包的时候，若是使用 import 方式引入，那么就须要设置 external 来解决

在抽离过程当中出现的一些坑记录以下

1. 配置 external 属性时，以下的方式配置会致使xlsx为undefined

   // webpack 配置
   externals: {
      'xlsx-populate': 'xlsx-populate'
   },
     
   // 组件内使用
   import xlsx from 'xlsx-populate';

   正确配置以下：其中externals 中的value值，应该是引入该scripts后，该scripts在window上暴露出来的全局变量名称，在这里就是 XlsxPopulate ，全局变量不必定和包名相同。这一点在webpack的文档中虽然给了一个 jquery 设置 external 的例子，可是若是不注意很容易忽略掉。

   // webpack 配置
   externals: {
      'xlsx-populate': 'XlsxPopulate'
   },
     
   // 组件内使用
   import xlsx from 'xlsx-populate';

2. 在 worker 中使用时， importScripts 并非返回一个暴露出来的模块供咱们使用，因此去哪找挂载在worker中的这个模块呢？其实这个模块被挂载在了 该worker的 self 对象上，self 就等于页面中的 windows 对象

   importScripts('https://cdn-src.aiyunxiao.com/xlsx-populate/1.20.1/xlsx-populate.min.js');
   const XlsxPopulate = self.XlsxPopulate;
   // ... 使用 XlsxPopulate 作接下来的事

看一下最后上线后的结果：

页面中使用 script 标签引入 xlsx-populate

在导出 excel 时，直接使用的缓存的 xlsx-populate 文件，因此总体只加载一次。

原文：chaijinsong-blog