你可能不須要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