生产模式下的 webpack 问题（缩小问题）

Question

我正在为增强现实开发这个小项目，ARnft it is based on a lighter version of Jsartoolkit5, JsartoolkitNFT 仅用于 NFT 标记。代码遵循 ES6 标准（部分）并使用 webpack 作为打包器。在开发模式下一切都很好，但是当我进入生产模式时，该示例出现此错误：

05ff8846-4121-4380-86c3-9612f404732a:1 Uncaught SyntaxError: Function statements require a function name

它停在嵌入的Worker上。该应用程序不会进入内部，否则我会在开发控制台中收到一些消息。我将 Worker 注入到 Blob 对象中：

// create a Worker to handle loading of NFT marker and tracking of it
const workerBlob = new Blob(
  [workerRunner.toString().replace(/^function .+\{?|\}$/g, '')],
    { type: 'text/js-worker' }
  )
const workerBlobUrl = URL.createObjectURL(workerBlob)

worker = new Worker(workerBlobUrl)

https://github.com/kalwalt/ARnft/blob/8322585aa0f863917c6d1cee541356ff3b7c36a0/src/utils/Utils.js#L207-L213

在此行定义的 workerRunner：

https://github.com/kalwalt/ARnft/blob/8322585aa0f863917c6d1cee541356ff3b7c36a0/src/utils/Utils.js#L272

我认为这是我尝试在脚本中添加 --optimize-minimize 的缩小问题：

"build-es6": "webpack --mode production --optimize-minimize",

，但没有帮助。我该如何解决这个问题？

谢谢

Answer 1

这个问题可以通过 worker-loader 插件解决。

而不是像问题中解释的那样在 Blob 中内联 worker：

创建外部 Worker.js 并导入文件（在本例中 Utils.js）：

import Worker from './Worker.js'

照常使用工人：

let worker
// other code
worker = new Worker()
// other code with postMessage and onmesssage...

在wepback.config.js

{
  test: /\worker\.js$/,
    use: {
      loader: 'worker-loader',
        options: { inline: true, fallback: false }
    }
}

你也可以看到这个commit and the issue on webpack。

生产模式下的 webpack 问题（缩小问题）

Issue with webpack in production mode ( minification issue )

javascript

augmented-reality

artoolkit

webpack

jsartoolkit