Запретить react-snap помещать все ссылки на 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 статей, но мне кажется, что это уже должно быть частью puppeteer или react-snap.

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
2 254
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.

Спасибо, Аллан, я хотел бы сначала увидеть этот ответ, но в итоге я просто написал свой собственный форк с желаемой функциональностью. В конце концов это было не так сложно сделать, но я думаю, что это не будет объединено обратно в основную ветку.

SJoshi 13.05.2019 15:58

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