Предотвращение размещения всех ссылок 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
,