Предотвращение размещения всех ссылок JS-скрипта в сгенерированных файлах

Я возиться с использованием react-snap предварительно отрендерить мой новый блог, и все работает довольно фантастически, за исключением нескольких вещей.

По какой-то причине в заголовки были включены сценарии, но я смог применить async атрибуты этих сценариев, так что это не так уж важно. Но потом я понял, что нет причин, по которым большинство моих сценариев включаются в первую очередь...

В блоге нет динамического контента, это всего лишь CSS/HTML, и я использовал React только для упрощения разработки - однако у меня есть библиотеки Markdown, все еще включенные в HTML, а также 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 статьях, но я чувствую, что это также должно быть частью кукловода или ответной хваткой.

РЕДАКТИРОВАТЬ: вздох... Как обычно, хотя я искал это раньше, через 5 минут после публикации SO сообщение - я наткнулся на частичный ответ: removeScriptTags: true в react-snap package.json

Это удовлетворяет случаю, когда я хочу удалить ВСЕ мои скрипты, однако есть ли частичное решение? Например, допустим, я хочу превратить этот блог в PWA - и, следовательно, возможно, потребуется зарегистрировать работника службы (или, возможно, я столкнулся с другим вариантом использования, где мне нужно 1-2 файла JS)

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,

Другие вопросы по тегам