2

我正在搞乱使用react-snap来预渲染我的新博客，除了一些事情之外，一切都非常出色。

出于某种原因，脚本被包含在标题中，但我能够将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
}

在我所有预先生成的帖子的底部，我有：

<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）它们都没有被使用！

注意：我知道将 JS 文件放在正文的底部并标记它们async可能是多余/不必要的，但由于某些原因，在捕捉后，这些 JS 文件有时会放在标题中（我不知道为什么） - 所以为了性能安全，我react-snap将它们标记为异步。

有什么办法可以停止包含我的任何/所有/某些 JS 文件？我知道我可以手动执行此操作，或者通过对 100 多篇文章进行一些后期处理，但我觉得这也必须是 puppeteer 或 react-snap 的一部分。

编辑：叹息......像往常一样，即使我之前搜索过这个，在发布 SO 帖子 5 分钟后 - 我遇到了一个部分答案：removeScriptTags: true在react-snappackage.json

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

4

1 回答 1

1

好吧，您已经找到了部分解决方案。不幸的是，没有办法只删除一些标签。事实上，removeScriptTags很可能会被丢弃。有人做了一个分叉来实现您要求的相同功能。有关详细信息，请参阅此问题：https ://github.com/stereobooster/react-snap/issues/298

为了避免 fork 或 modify ，您可以改为编写自己的脚本，该脚本加载输出并执行与使用 进行react-snap的操作非常相似的操作，但选择要提取的脚本。在此处查看原始实现：https ://github.com/stereobooster/react-snap/blob/master/index.js#L232react-snapremoveScriptTags

然后只需将该脚本添加到您的postbuild, after中即可react-snap。

于 2019-05-12T21:44:40.990 回答