2

react-snap新しいブログを事前にレンダリングするためにをいじっていますが、いくつかのことを除いて、すべてが非常にうまく機能します。

なぜかヘッダーにスクリプトが含まれていたのですが、asyncスクリプトに属性を適用できたので大したことはありませんでした。しかし、そもそも私のスクリプトの大部分が含まれている理由がないことに気付きました...

ブログには動的なコンテンツはありません。すべては CSS/HTML だけです。開発を簡素化するために React のみを使用しまし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 以上の記事の後処理を介してこれを行うことができることはわかっていますが、これは操り人形師または反応スナップの一部である必要があると感じています。

編集：ため息...いつものように、SO投稿を投稿してから5分後にこれを検索しましたが、部分的な答えに出くわしました：removeScriptTags: truepackage.jsonreact-snapで

すべてのスクリプトを削除したい場合はこれで十分ですが、部分的な解決策はありますか? たとえば、このブログを PWA に変えたいとします。したがって、Service Worker を登録する必要があるかもしれません (または、1 ～ 2 個の JS ファイルが必要な別のユース ケースに出くわすかもしれません)。

4

1 に答える 1