Web Worker中导入fast-png模块失败问题求助

• 需求：因处理16位灰度PNG图像的深度细节精度要求，主程序中使用fast-png的decode函数可正常完成图像解码
• 异常现象：在Web Worker中导入fast-png后，Worker直接停止工作，postMessage返回值变为undefined，无法执行解码操作；导入项目内其他模块无异常
• 背景：fast-png为TypeScript编写的npm包，无直接可导入的JavaScript模块，主程序中导入使用一切正常

相关代码 #

线程管理类（thread-manager-class） #

import {decode} from 'fast-png';    // 此处导入正常但无需使用
export const texture_loader_threaded = (function() {
  class _TextureLoader_Threaded {
    constructor(params) {
      this.TextureLoaderWorker = new Worker('src/texture-loader-threaded-worker.js', {type: 'module'});
      this.TextureLoaderWorker.onmessage = (e) => { 
        this.result = e.data;
      };
    }//end constructor
  }//end class
  return {
    TextureLoader_Threaded: _TextureLoader_Threaded
  }
})();

Worker文件（texture-loader-threaded-worker.js） #

//import { decode } from 'fast-png';        
// 导入fast-png会导致Worker失效
async function imageLoader() {
    const arrayBuffer = await(await fetch('./resources/textures/png/native.png')).arrayBuffer();
    //const data = await decode(arrayBuffer);   // 需此语句解码图像数据
    postMessage(arrayBuffer);   // 测试有效，但需返回解码后的数组
}
imageLoader();

方法1：借助打包工具处理Worker模块依赖 #

Web Worker的模块解析逻辑和主程序不同，需确保fast-png被正确编译打包到Worker代码中：

• 若使用Vite、Webpack等现代打包工具，调整Worker的导入方式：
  以Vite为例，主程序中直接导入Worker文件（而非通过路径实例化）：

  // 主程序替换Worker创建逻辑
  import TextureLoaderWorker from './src/texture-loader-threaded-worker.js?worker'
  this.TextureLoaderWorker = new TextureLoaderWorker();
  

  打包工具会自动处理Worker的所有依赖，包括fast-png的编译转换

方法2：手动编译fast-png为Worker兼容的ES模块 #

1. 克隆fast-png仓库，修改其tsconfig.json，设置module: ESNext
2. 用TypeScript编译器将源码编译为ES模块格式的JS文件
3. 将编译后的文件复制到项目静态资源目录，在Worker中直接导入该文件：

   import { decode } from './path/to/compiled-fast-png.js';
   

方法3：尝试动态导入替代静态导入 #

在Worker中使用动态导入加载fast-png，规避静态导入的解析问题：

async function imageLoader() {
    const { decode } = await import('fast-png');
    const arrayBuffer = await(await fetch('./resources/textures/png/native.png')).arrayBuffer();
    const data = await decode(arrayBuffer);
    postMessage(data);
}
imageLoader();

内容的提问来源于stack exchange，提问作者Spiri