Как измерить производительность первого рендера с течением времени в приложении React?

Question

Цель: я хочу измерить производительность нашего приложения реагирования данными о рабочем размере, запустив скрипт узла на нашем CI-сервере.Идея состоит в том, чтобы измерить производительность нашего проекта с течением времени по мере развития кодовой базы.

Я погуглил и с удивлением обнаружил, что ничего похожего на то, чего я пытаюсь достичь,

Я пытаюсь через SSR и выполняю renderToString () с нашими данными prod и фиксирую разницу во времени, используя dateTime, который дает разумное время (около 2 секунд).Я хочу выполнить это X раз и получить самое быстрое время для устранения аномалий.Возможно, он не может точно измерить производительность первого рендера пользователя, но это больше связано с измерением относительной производительности во времени.

const runPerformanceTest = async () => {
    prodData = await import('../data')

    const history = createMemoryHistory()
    history.replace('/')

    const initialState = () => ({
      data: prodData
    })

    const mockStore = () => createStore(
      rootReducer,
      initialState(),
    )

    const timestamps = []

    for (let i = 0; i < 10; i++) {
      const startTime = Date.now()
      const store = mockStore()
      renderToString((
        <StaticRouter context={{}}>
          <Provider store={store}>
            <ConnectedRouter history={history}>
              <App />
            </ConnectedRouter>
          </Provider>
        </StaticRouter>
      ))
      const endTime = Date.now() - startTime
      timestamps.push(endTime)
    }

    console.log(timestamps)
}

Я ожидаю, что временные метки появятся примерно как [2000, 2000, 2000, 2000,2000, 2000, 2000, 2000, 2000, 2000]

Однако на самом деле возвращаются метки времени [2000, 20, 30, 30, 30, 30, 30, 30, 30, 30]

Похоже, что он предлагает возвращать кэшированные результаты, когда он выполняет renderToString после первой итерации.

Есть кое-что, что я неправильно понимаю из-за того, что делает узел, или я иду по неверному пути.Мне было интересно, если у кого-нибудь были идеи?Также заинтересован в альтернативных предложениях.

Answer 1

Хммм .. Возможно, это не то, что позволяет вам отслеживать производительность пользователя с течением времени, но вы можете использовать Google Lighthouse для измерения производительности вашего веб-сайта. Его можно запустить прямо из браузера Chrome или даже из командной строки.

Вы даже можете делать такие вещи, как выбор скорости интернета / производительности процессора, чтобы вы знали, как быстро загружается ваша страница при подключении 3G (то есть, насколько быстро ваша страница загружается в менее развитых странах, когда скорость интернета может быть ниже).

Он разбивает оценку производительности на отдельные части, такие как загрузка сценариев, размер пакета и т. Д., И дает советы о том, как повысить производительность.