如何解决如何在 NextJS 10 中初始化 webworker?
我有一个 Next 10 项目,我正在尝试使用 WebWorkers。工作人员正在像这样初始化:
window.RefreshTokenWorker = new Worker(new URL('../refreshToken.worker.js',import.meta.url))
我也将 Worker 定义为
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
在构建版本 (postMessage
) 上没有收到从 yarn build && yarn start
发送的消息,但在开发版本上收到了(yarn dev
)。有什么办法可以解决这个问题?
解决方法
这不是解决方案。但可能是一种凌乱的方式来完成这项工作。结果这对我来说是一场噩梦。
我的设置和你的一样。正如您在问题中所示,我正在初始化网络工作者。我从 nextjs 文档本身得到了这个想法:https://nextjs.org/docs/messages/webpack5
const newWebWorker = new Worker(new URL('../worker.js',import.meta.url))
当我在 dev
模式下工作时,一切正常。它正确地提取了 worker.js
文件,一切正常。
但是当我构建 nextjs 并尝试它时,Web Worker 将无法工作。当我深入研究这些问题时,我发现 worker.js 块文件是直接在 .next
文件夹下创建的。理想情况下,它应该位于 .next/static/chunk/[hash].worker.js
之下。
我无法以适当的方式解决此问题。
所以我做了什么,我将我的 worker.js
文件直接放在 public
目录下。我将我的 worker.js
文件转译和优化,并将代码放入 public/worker.js
文件中。
在此之后,我像这样修改了worker初始化:
const newWebWorker = new Worker('/worker.js',{ type: 'module' });
它现在正在生产版本中工作。一旦我得到更清晰的解决方案,我会报告。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。