我有一个Next 10项目,我试图使用WebWorkers。工人被初始化如下:
window.RefreshTokenWorker = new Worker(new URL('../refreshToken.worker.js', import.meta.url))
字符串
我还将工人定义为
self.addEventListener('message', (e) => {
console.info("ON MESSAGE: ", e)
// some logic with e.data
})
型
它也被称为这样:
const worker = getWorker() // gets worker that is attached at the window level
worker.postMessage('start')
型
我的next.config.js
文件被定义为
const nextConfig = {
target: 'serverless',
env: getBuildEnvVariables(),
redirects,
rewrites,
images: {
domains: []
},
future: { webpack5: true },
webpack (config) {
config.resolve.alias['@'] = path.join(__dirname, 'src')
return config
}
}
// more definitions
module.exports = nextConfig
型
我遇到的问题是Web Worker定义中的console.info
在构建版本(yarn build && yarn start
)上没有收到从postMessage
发送的消息,但在开发版本(yarn dev
)上收到了。有什么方法可以解决这个问题吗?
2条答案
按热度按时间ac1kyiln1#
这不是一个解决方案。但可以是一个混乱的方式来做这项工作。这对我来说是一场噩梦。
我的设置和你的一样。我正在初始化你在问题中提到的web worker。我从nextjs文档本身得到了这个想法:https://nextjs.org/docs/messages/webpack5
字符串
当我在
dev
模式下工作时,一切正常。它正确地拾取了worker.js
文件,一切看起来都很好。但是当我构建nextjs并尝试它时,web worker就不能工作了。当我深入研究这个问题时,我发现worker.js块文件直接创建在
.next
文件夹下。它应该在.next/static/chunk/[hash].worker.js
下。我无法以适当的方式解决这个问题。
所以我做了什么,我把我的
worker.js
文件直接放在public
目录下。我把我的worker.js
文件编译和优化,并把代码放在public/worker.js
文件中。在此之后,我修改了worker初始化,如下所示:
型
它现在正在生产版本中工作。一旦我得到一个更干净的解决方案,我会报告的。
vmdwslir2#
我发现了一些有用的东西
https://nextjs.org/docs/messages/webpack5
上面写着
支持使用new Worker(new URL(“worker.js”,import.Meta.url))的Web Workers
它对我很有效,只要记住,你必须准确地写出来,我的看起来像这样
字符串