Мне трудно понять, что не так в нашей производственной сборке. Иногда загрузка страницы работает безупречно. В других случаях все ломается, и URL-адреса запроса go из
example.com / static / js / 2017.4d0339ef.chunk. js
TO
пример. com /% 22 / static / js / 2017.4d0339ef.chunk.js /% 22 * 1007 *
Страница может постоянно нарушаться, вызывая аппаратное обновление sh (ctrl + shift + r), но иногда URL-адреса запросов в любом случае используются при первой загрузке.
Это приложение для реагирования, использует рендеринг на стороне сервера, serviceWorkers, workbox, webpack.
Похоже, что workbox может кодировать пути как строку и передавать их в форме JS , и где-то в процессе сборки наш индексный файл запрашивает эти пути (отсюда и вставка% 22).
Если кто-то сталкивался с чем-то подобным раньше или мог бы указать какое-то направление, это было бы очень оценен!
Вот некоторые изображения проблемы:
Страница
изображение битой страницы
Вкладка «Элементы»
вкладка элементов, где все переменные html экранированы вкладкой \ "
элементов, дополнительная изображение элементов внутри тегов body
Вкладка «Сеть»
вкладка сети, где все вызовы были преобразованы в запрашивающие% 22 * 1044 *
Вот область GenerateSW из webpack, если это полезно
isEnvProduction &&
new WorkboxWebpackPlugin.GenerateSW({
clientsClaim: true,
exclude: [
/assets-icons-.+-js/,
/\.map$/,
/asset-manifest\.json$/,
/hot-update\.(js|json)$/,
],
navigateFallback: paths.publicUrlOrPath + "index.html",
navigateFallbackDenylist: [
// Exclude URLs starting with /_, as they're likely an API call
new RegExp("^/_"),
// Exclude any URLs whose last part seems to be a file extension
// as they're likely a resource and not a SPA route.
// URLs containing a "?" character won't be blacklisted as they're likely
// a route with query params (e.g. auth callbacks).
new RegExp("/[^/?]+\\.[^/]+$"),
],
}),
И плагин манифеста в webpack
new ManifestPlugin({
fileName: "asset-manifest.json",
publicPath: paths.publicUrlOrPath,
generate: (seed, files, entrypoints) => {
const manifestFiles = files.reduce((manifest, file) => {
manifest[file.name] = file.path;
return manifest;
}, seed);
const entrypointFiles = entrypoints.main.filter(
(fileName) => !fileName.endsWith(".map")
);
return {
files: manifestFiles,
entrypoints: entrypointFiles,
};
},
}),
ОБНОВЛЕНИЕ: только что заметил, что вещи, которые должны быть внутри, помещаются в тело. Учитывая, что ssr берет сценарии стиля, которые он находит, и заменяет тег внутри
. Если в документе нет заголовка, то не должно быть никаких тегов ссылок, мета или стиля, потому что не было бы тега для замены. Все еще не уверен, в чем заключается основная проблема, но это, похоже, полезная подсказка
вкладка сети, необработанная HTML с первого вызова
Примечание : На вкладке сети первый вызов правильно помещает элементы заголовка туда, где они принадлежат (в заголовке), но все еще имеет изобилие элементов \ n и "\" данных \ "", что немного отличается от вкладки элементов, где все элементы, которые должны быть в голове, теперь находятся в теле
ссылка на живой сайт, где возникла проблема https://stage.cryptohedgehog.io/
РЕШЕНО: Пара элементов здесь. Во-первых, мы ссылались на req.url как на клиенте, так и на сервере, но req.url изменяется с помощью babel на клиенте, поэтому мы изменили имя переменной на req.originalUrl
Во-вторых, наш сервер сохраняет json данные, которые преобразовываются в строку перед отправкой в redis. Мы также конвертируем html в буферный поток на клиенте, чтобы мы могли отправлять данные по частям, а не как один большой кусок.
Итак, мы конвертировали HTML в строку для хранения на redis, используя метод Buffer.toString (), а также применяя метод json .stringify к буферу, который портит кешированный результат в redis.
Yowza what al oop.