Preact生产构建失败：意外字符'!'，无错误位置提示

Preact生产构建在执行additional chunk assets processing步骤后失败，未给出任何错误位置。

目前我能想到的唯一办法就是手动排查所有的'!'。

环境信息：

• nvm 12.18.3
• Ubuntu 20.04

构建日志 #

npm run build

> cdms-app@0.0.1 build /home/technative/Documents/Projects/CrystalDevDocker/cdms-app
> preact build --no-prerender --dest public --esm --analyze --verbose

⚠ WARN Could not find sw.js in /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/src. Using the default service worker.
⚠ WARN /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/prerender-urls.json doesn't exist, using default!
Uh oh AssertionError [ERR_ASSERTION]: Unable to find a place to inject the manifest. Please ensure that your service worker file contains the following:/(\.precacheAndRoute\()\s*\[\s*\]\s*(\)|,)/
   at Object._callee$ (/home/technative/Documents/Projects/CrystalDevDocker/cdms-app/node_modules/workbox-build/build/entry-points/inject-manifest.js:82:13)
   at tryCatch (/home/technative/Documents/Projects/CrystalDevDocker/cdms-app/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40)
   at Generator.invoke [as _invoke] (/home/technative/Documents/Projects/CrystalDevDocker/cdms-app/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22)
   at Generator.prototype.<computed> [as next] (/home/technative/Documents/Projects/CrystalDevDocker/cdms-app/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21)
   at step (/home/technative/Documents/Projects/CrystalDevDocker/cdms-app/node_modules/babel-runtime/helpers/asyncToGenerator.js:17:30)
   at /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/node_modules/babel-runtime/helpers/asyncToGenerator.js:28:13 {
 generatedMessage: false,
 code: 'ERR_ASSERTION',
 actual: null,
 expected: true,
 operator: '=='
}
Build  [=     ] 10% (1.4s) buildingNodent: Warning - noNodentExtensions option requires acorn >=v4.x. Extensions installed.
Build  [=     ] 12% (7.4s) building[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/src/components/createvisitmodal/index.js as it exceeds the max of 500KB.
Build  [=   ] 15% (171.5s) building[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/src/routes/siloAdministration/index.js as it exceeds the max of 500KB.
Build  [=   ] 15% (271.8s) building[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/src/routes/caseDetail/index.js as it exceeds the max of 500KB.
Build  [=   ] 17% (289.7s) building[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/node_modules/pdfmake/build/vfs_fonts.js as it exceeds the max of 500KB.
Build  [==  ] 40% (289.8s) building[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/node_modules/pdfmake/build/pdfmake.js as it exceeds the max of 500KB.
Build  [==  ] 40% (377.0s) building[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/src/components/semiDetailView/index.js as it exceeds the max of 500KB.
Build  [====] 90% (487.8s) additional chunk assets processing[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/src/components/createvisitmodal/index.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/src/routes/siloAdministration/index.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/src/routes/caseDetail/index.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/node_modules/pdfmake/build/pdfmake.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/node_modules/pdfmake/build/vfs_fonts.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /home/technative/Documents/Projects/CrystalDevDocker/cdms-app/src/components/semiDetailView/index.js as it exceeds the max of 500KB.


Build failed! 

Error: Unexpected '!'. Escaping special characters with \ may help.

排查优化方案 #

1. 聚焦高风险文件：优先检查日志中标记的超大文件（超过500KB），这类文件代码量多，出现未转义特殊字符的概率更高，比如createvisitmodal/index.js、siloAdministration/index.js等。
2. 定向搜索排查：在项目根目录全局搜索!，排除!important、逻辑非运算符等合法场景，重点关注模板字符串、CSS-in-JS样式、正则表达式里的未转义!。
3. 逐步定位模块：注释掉可疑模块后重新构建，逐步缩小出错范围，再在目标文件内细化查找问题位置。
4. 增强调试信息：在Preact的webpack配置中添加stats: 'verbose'，尝试获取更精准的错误位置提示。

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