Создание страниц размером более 60 КБ снижает производительность страницы

Question

Я работаю на довольно большом сайте электронной коммерции, который был создан с использованием gatsby. До сих пор мы динамически загружали все данные о наших продуктах во время выполнения, поэтому у нас была только 1 страница продукта для всего сайта и всего около 3 тыс. Страниц.

Однако по причине SEO мы пытаемся построить статически все наши страницы продукта, и это добавляет около 60 тыс. страниц на веб-сайт.

После того, как мы сделали это, файл нашего приложения. [hash]. js увеличился до 10 МБ, а общая производительность страницы по мере загрузки. Перемещение по ссылкам приводит к зависанию страницы на полсекунды.

Мы создаем страницы продукта, передавая данные продукта в виде контекста страницы при вызове create pages:

  const productsRaw = await fetch(productsUrl)
  const products = await productsRaw.json()

  /* Build a page for each product */
  if (products) {
    products.forEach(product => {
      const productPage = {
        path: `/product${product.route}`,
        component: path.resolve(`./src/templates/product.jsx`),
        context: product,
      }
      createPage(productPage)
    })
  }

Мы считаем, что плохо производительность страницы связана с приложением. js файл прыгает примерно до 10 МБ. Есть ли какая-либо оптимизация, которую мы можем сделать, чтобы уменьшить размер этого файла, или это просто неизбежно при увеличении количества страниц?

Обновление

После анализа веб-пакета я нашел проблема в том, что каждая страница продукта добавляется в файл match-path. json. Это привело к тому, что файл превысил 10 МБ. Нужно ли, чтобы все эти пути были добавлены в файл, и если нет, то есть ли способ исправить это при создании страницы?

Обновление 2

В итоге я написал скрипт для удаления всех путей, не являющихся регулярными выражениями, из пути поиска. json до запуска веб-пакета, и сайт, кажется, работает отлично и работает очень хорошо. Как я могу предотвратить их добавление?

Answer 1

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

1. В gatsby-node.js, вызывайте createPage для каждой экспортируемой страницы
2. Включите минимальный объем информации, необходимый для поиска данных для этой страницы в context, передаваемом в createPage (например, идентификатор или фрагмент)
3. В вашем шаблоне страницы используйте контекст для фильтровать данные, возвращаемые запросом GraphQL (каждое свойство context доступно в качестве аргумента для именованного запроса GraphQL)
4. Извлекать только те данные, которые необходимы для страницы в вашем запросе GraphQL; любые данные, которые остаются постоянными во всех экземплярах компонента, могут вместо этого использовать запрос stati c

Если вы будете следовать вышеизложенному, данные каждого запроса страницы будут записаны как отдельные данные страницы. json файл, который будет довольно маленьким (это буквально только данные запроса). Это должны быть единственные данные, которые предварительно выбираются при наведении на ссылку.

Примечание: если после этого ваш файл app.<hash>.js все еще велик, скорее всего, у вас есть данные, которые вы не ожидаете там. Проверьте это, используя webpack-bundle-analyzer , чтобы увидеть, откуда исходит вес.

Answer 2

Я понял это. Таким образом, мы действительно создаем другую страницу продукта Dynami c, которая содержит matchPath. Эта страница используется только в том случае, если мы неправильно строим все продукты, и пользователь пытается получить доступ к продукту, который не генерируется статически. В этом случае он попадет в путь совпадения, который будет динамически загружать данные продукта. Эта страница также использует тот же шаблон, что и другая страница продукта. Когда я удаляю эту страницу из создания, все другие продукты удаляются из пути поиска. json, но когда она включена, все другие продукты добавляются в путь поиска. json. Вот код:

/* Build a page for each product */
  if (products) {
    products.forEach(product => {
      const productPage = {
        path: `/product${product.route}`,
        component: path.resolve(`./src/templates/product.jsx`),
        context: { product, banners: PDPBannerData ? PDPBannerData.contentfulProductAdditionalContent : null },
      }
      createPage(productPage)
    })
  }

  const productPage = {
    path: '/product',
    component: path.resolve(`./src/templates/product.jsx`),
    context: { banners: PDPBannerData ? PDPBannerData.contentfulProductAdditionalContent : null },
    matchPath: `/furniture/product/*`,
  }
  createPage(productPage)

Я предполагаю, что это делает это по какой-то причине, какие-либо мысли о том, почему это необходимо? Мы говорили об удалении этой динамической c страницы, поэтому для нас, вероятно, не имеет большого значения просто удалить ее и двигаться дальше.