Question

我正在使用react-snap来预渲染我的新博客，除了几件事之外，其他所有功能都可以正常运行。

由于某种原因，脚本被包含在标题中，但是我能够将async属性应用于这些脚本，所以没什么大不了的。但是后来我意识到没有理由将我的大多数脚本都放在首位...

博客中没有动态内容，仅是CSS / HTML，我仅使用React来简化开发-但是，HTML中仍然包含Markdown库以及react-dom，{ {1}}和其他一些

。

给出这个package.json：

react-router

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

"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
}

但是！（也许highlight.js除外）都没有使用！

注意：我知道将JS文件放在正文底部并标记为<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>可能是多余的/不必要的，但是由于某些原因，在快照之后，这些JS文件有时会放在标题中（我不知道为什么）-因此，出于性能安全的考虑，我将async标记为异步。

有什么办法可以停止对我的JS文件的任何/全部/部分的包含？我知道我可以手动执行此操作，也可以通过对100余篇文章进行一些后期处理来做到这一点，但是我觉得这也必须已经成为伪装者或react-snap的一部分。

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

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

Answer 1

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

为避免派生或修改react-snap，您可以编写自己的脚本，该脚本加载输出并执行与react-snap与removeScriptTags相似的操作，但选择要拉动的脚本。在此处查看原始实现：https://github.com/stereobooster/react-snap/blob/master/index.js#L232

然后只需在postbuild之后在您的react-snap中添加该脚本即可。

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

1 个答案: