防止 react-snap 将所有 JS 脚本链接放入生成的文件中

Question

我正忙于使用 react-snap 来 pre-render 我的新博客，除了一些东西外，一切都非常棒。

出于某种原因，脚本被包含在 header 中，但我能够将 async 属性应用于这些脚本，所以这没什么大不了的。但后来我意识到，我的大部分脚本都没有理由首先被包含在内......

博客中没有动态内容，都是CSS/HTML，我只是用React来简化开发——不过，我在HTML里还有Markdown库，还有如 react-dom、react-router 和其他一些人。

鉴于此 package.json：

"scripts": {
    "build": "TS_NODE_PROJECT='tsconfig-webpack.json' webpack --mode production",
    "dev": "TS_NODE_PROJECT='tsconfig-webpack.json' webpack-dev-server --mode development --hot",
    "format": "prettier --write \"{./**/*.{ts,js,json,scss,css,less,md}*, !(node_modules)/**/*}\"",
    "postbuild": "react-snap",
    "test": "jest",
    "testing": "jest --watch"
},
"reactSnap": {
    "inlineCss": true,
    "sourceMaps": false,
    "asyncScriptTags": true
}

在我所有 pre-generated post 的底部，我有：

<script async src="/runtime.d0e50ef7a54258c04b4b.js" type="text/javascript"></script>
<script async src="/npm.highlight.js.948b8c6fe7c6dff967e6.js" type="text/javascript"></script>
<script async src="/npm.remark-parse.752d87940c4e3c27644f.js" type="text/javascript"></script>
<script async src="/npm.js-yaml.38d965a6b2c1867313a0.js" type="text/javascript"></script>
<script async src="/npm.date-fns.e514c2b76cfb0e33eae1.js" type="text/javascript"></script>
<script async src="/npm.react-router.38c6735027e6ab8d92dc.js" type="text/javascript"></script>
<script async src="/npm.react-dom.43e459d17b017d4525f7.js" type="text/javascript"></script>
<script async src="/npm.buffer.03943cd6611cbaf46bd8.js" type="text/javascript"></script>
<script async src="/npm.esprima.485b4b9d10b5eb3bd8f0.js" type="text/javascript"></script>
<script async src="/vendors~main.f2266dc8cae4f4636b15.js" type="text/javascript"></script>
<script async src="/main.e3335690c0cf73e2a36c.js" type="text/javascript"></script>

但是！（可能 highlight.js 除外）其中 none 个已被使用！

注意：我知道将 JS 文件放在 body 底部并标记为 async 可能是 redundant/unnecessary，但由于某些原因，在 snappening 之后，那些 JS文件有时会放在 header 中（我不知道为什么）——所以为了性能安全，我 react-snap 将它们标记为异步。

有什么方法可以停止包含 any/all/some 我的 JS 文件？我知道我可以手动执行此操作，或者通过 100 多篇文章中的一些 post-processing，但我觉得这也必须是 puppeteer 的一部分或已经 react-snap。

编辑：叹息......和往常一样，尽管我之前搜索过这个，但在 posting SO post 后 5 分钟 - 我遇到了部分答案：removeScriptTags: true 在 react-snap package.json

这满足了我想删除所有脚本的情况，但是，是否有任何部分解决方案？例如，假设我想把这个博客变成一个 PWA - 因此可能需要注册一个 service worker（或者我可能遇到另一个需要 1-2 个 JS 文件的用例）

Answer 1

嗯，您已经找到了部分解决方案。不幸的是，没有办法只删除一些标签。事实上，removeScriptTags 很可能会被丢弃。有人制作了一个叉子来实现您所要求的相同功能。详情见本期：https://github.com/stereobooster/react-snap/issues/298

为了避免必须分叉或修改 react-snap，您可以改为编写自己的脚本，它会加载输出并执行与 react-snap 对 [=10= 所做的非常相似的操作]，但要选择要提取的脚本。在此处查看原始实现：https://github.com/stereobooster/react-snap/blob/master/index.js#L232

然后只需将该脚本添加到您的 postbuild 中，在 react-snap 之后。

防止 react-snap 将所有 JS 脚本链接放入生成的文件中

Prevent react-snap from putting all JS script links into generated files

javascript

node.js

reactjs

webpack

react-snap