Отслеживание причины крупной сборки мусора в React HMR - PullRequest
Новая
       31

Отслеживание причины крупной сборки мусора в React HMR

0 голосов
/ 01 ноября 2019

Я использую NextJS, реагирование, редукцию, стилизованные компоненты, материал-интерфейс и т. Д.

После каждого сохранения проекта, который я унаследовал, кажется, что Chrome полностью упадет и начнет использовать 33%мой процессор, у меня довольно приличный ПК.

enter image description here

Я все еще могу взаимодействовать с инструментами разработки Chrome и запускаю коллекцию производительности около 2секунд. Тогда, может быть, через 2/3 минуты я увижу следующее:

Mao

Теперь я совершенно озадачен тем, как производить. Я удалил все компоненты с рассматриваемой страницы, это не меняет результат. Это заставляет меня думать, что это корни приложений: 

import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheets as MuiServerStyleSheets } from '@material-ui/styles'
import { ServerStyleSheet } from 'styled-components'
import nextCookies from 'next-cookies'
import themes from '~/themes'

export default class extends Document {
  static getInitialProps(ctx) {
    const sheet = new ServerStyleSheet()
    const muiSheet = new MuiServerStyleSheets()
    const page = ctx.renderPage(App => props => sheet.collectStyles(muiSheet.collect(<App {...props} />)))
    const styleTags = sheet.getStyleElement()
    const muiStyleTags = muiSheet.getStyleElement()

    const { theme } = nextCookies(ctx)

    return { ...page, styleTags, muiStyleTags, theme: theme || 'light' }
  }

  render() {
    const { styleTags, muiStyleTags } = this.props

    return (
      <html>
        <Head>
          <meta charSet="utf8" />
          <meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0" name="viewport" />
          <meta property="og:type" content="website" />
          <link href="https://fonts.googleapis.com/css?family=Dosis:300|Roboto+Mono:100,300,100i,300i,400,400i,700,700i&display=swap" rel="stylesheet" />
          <script src="https://js.stripe.com/v3/" />
          {styleTags}
          {muiStyleTags}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    )
  }
}

Так возможно ли, что const page = ctx.renderPage(App => props => sheet.collectStyles(muiSheet.collect(<App {...props} />))) может вызвать столько перерисовок или чего-либо подобного, чтобы убить мое приложение?

...