Web Worker加载外部文件实践

概述

在Web Worker 多线程编程一文中介绍了Web Worker的编程思想,碰巧最近工作中某个工程需要加载外部文件，最大的文件大小达到30MB，Web Worker无疑是不错的选择。

编程实现

• 不用 Web Worker
  加载外部文件使用原生的fetch方法读取文件，其核心代码如下：

  function loadlandsBound() {fetch("./geojson/lands.json").then((response) => response.json()).then((data) => {/** 业务逻辑处理 */}).catch((error) => console.error("Error loading GeoJSON:", error));
  }
  

  如果需要加载多个文件，可能就需要封装多个函数，调用fetch方法去请求文件。

• 使用 Web Worker
  使用Web Worker编程，实现就较为复杂。涉及到多线程之间的数据交互。
  worker.js实现如下：

  self.onmessage = async function (evt) {const { type