Я возился с использованием 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 статей, но мне кажется, что это уже должно быть частью puppeteer или react-snap.
Обновлено: Вздох... Как обычно, хотя я искал это раньше, через 5 минут после публикации сообщения SO - я наткнулся на частичный ответ: removeScriptTags: true
в react-snap
package.json
Это удовлетворяет случаю, когда я хочу удалить ВСЕ мои сценарии, однако есть ли частичное решение? Например, предположим, что я хочу превратить этот блог в PWA - и, следовательно, может потребоваться зарегистрировать сервис-воркера (или, может быть, я сталкиваюсь с другим вариантом использования, когда мне нужны 1-2 файла JS)
Ну, вы уже нашли частичное решение. К сожалению, нет возможности удалить только некоторые теги. На самом деле, 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
.
Спасибо, Аллан, я хотел бы сначала увидеть этот ответ, но в итоге я просто написал свой собственный форк с желаемой функциональностью. В конце концов это было не так сложно сделать, но я думаю, что это не будет объединено обратно в основную ветку.