Gatsby: рд░рд╣рд╕реНрдп рдФрд░ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛.рдЖрд▓рд╕реА рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛

рдХреЛ рдирд┐рд░реНрдорд┐рдд 21 рдлрд╝рд░ре░ 2019  ┬╖  1рдЯрд┐рдкреНрдкрдгреА  ┬╖  рд╕реНрд░реЛрдд: gatsbyjs/gatsby

capture d ecran 2019-02-21 a 10 57 39

рд╡рд┐рд╡рд░рдг

рдореБрдЭреЗ yarn build рдХреЗрд╡рд▓ рддрднреА рддреНрд░реБрдЯрд┐ рд╣реЛрддреА рд╣реИ рдЬрдм рдореИрдВ <Suspense> рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реВрдВ
yarn develop , рдореБрдЭреЗ рдХреЛрдИ рддреНрд░реБрдЯрд┐ рдирд╣реАрдВ рд╣реИред

рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ рдореИрдВ React.lazy() рдпрд╛ Loadable components рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред

import React, { Suspense } from 'react';

const Dashboard = props => {
  return (
      <Suspense fallback={<>Hey</>}>
        Hello
      </Suspense>
  );
};

export default Dashboard;

рдкреНрд░рдЬрдирди рдХреЗ рдЪрд░рдг

yarn build

рдЕрдкреЗрдХреНрд╖рд┐рдд рдкрд░рд┐рдгрд╛рдо

рдирд┐рд░реНрдорд╛рдг рд╕рдлрд▓рддрд╛ рдЪрд╛рд╣рд┐рдПред

рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдкрд░рд┐рдгрд╛рдо

рдирд┐рд░реНрдорд╛рдг рд╡рд┐рдлрд▓ рд░рд╣рддрд╛ рд╣реИред

рд╡рд╛рддрд╛рд╡рд░рдг

рдкреНрд░рдгрд╛рд▓реА:
рдУрдПрд╕: рдореИрдХреЛрдЬрд╝ 10.14.2
рд╕реАрдкреАрдпреВ: (8) x64 рдЗрдВрдЯреЗрд▓ (рдЖрд░) рдХреЛрд░ (рдЯреАрдПрдо) i5-8259U рд╕реАрдкреАрдпреВ @ 2.30GHz
рд╢реИрд▓: 3.2.57 - /рдмрд┐рди/рдмреИрд╢
рдмрд╛рдпрдиреЗрд░рд┐рдЬрд╝:
рдиреЛрдб: резрез.реп.реж - /usr/рд╕реНрдерд╛рдиреАрдп/рдмрд┐рди/рдиреЛрдб
рд╕реВрдд: 1.13.0 - /usr/рд╕реНрдерд╛рдиреАрдп/рдмрд┐рди/рдпрд╛рд░реНрди
рдПрдирдкреАрдПрдо: 6.5.0 - /usr/рд▓реЛрдХрд▓/рдмрд┐рди/рдПрдирдкреАрдПрдо
рднрд╛рд╖рд╛рдПрдБ:
рдкрд╛рдпрдерди: 2.7.10 - /usr/bin/python
рдмреНрд░рд╛рдЙрдЬрд╝рд░:
рдХреНрд░реЛрдо: ренреи.реж.рейремреирем.резрежреп
рдлрд╛рдпрд░рдлреЙрдХреНрд╕: 65.0.1
рд╕рдлрд╛рд░реА: 12.0.2
рдПрдирдкреАрдПрдо рдкреИрдХреЗрдЬ:
рдЧреИрдЯреНрд╕рдмреА: ^2.0.0 => 2.0.118
рдЧреИрдЯреНрд╕рдмреА-рдХреНрд▓реА: ^реи.рек.рем => реи.рек.реп
рдЧреИрдЯреНрд╕рдмреА-рдЗрдореЗрдЬ: ^2.0.26 => 2.0.29
рдЧреИрдЯреНрд╕рдмреА-рдкреНрд▓рдЧрдЗрди-рдЗрдореЛрд╢рди: ^4.0.1 => 4.0.3
рдЧреИрдЯреНрд╕рдмреА-рдкреНрд▓рдЧрдЗрди-рд░рд┐рдПрдХреНрд╢рди-рд╣реЗрд▓рдореЗрдЯ: ^3.0.0 => 3.0.6
рдЧреИрдЯреНрд╕рдмреА-рдкреНрд▓рдЧрдЗрди-рд╢рд╛рд░реНрдк: ^2.0.17 => 2.0.20
gatsby-source-filesystem: ^2.0.12 => 2.0.20
рдЧреИрдЯреНрд╕рдмреА-рдЯреНрд░рд╛рдВрд╕рдлрд╛рд░реНрдорд░-рд╢рд╛рд░реНрдк: ^2.1.10 => 2.1.13
рдПрдирдкреАрдПрдо рдЧреНрд▓реЛрдмрд▓ рдкреИрдХреЗрдЬ:
рдЧреИрдЯреНрд╕рдмреА-рдХреНрд▓реА: 2.4.8

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдЦреЛрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдмрд╣реБрдд-рдмрд╣реБрдд рдзрдиреНрдпрд╡рд╛рдж! рдЬреИрд╕рд╛ рдХрд┐ рдХрд╣рд╛ рдЧрдпрд╛ рд╣реИ, рдпрд╣ рдЧреИрдЯреНрд╕рдмреА рдХреЗ рд▓рд┐рдП рдереЛрдбрд╝рд╛ рд╕реНрдкрд░реНрд╢рд░реЗрдЦрд╛ рд╣реИред

рдЧреИрдЯреНрд╕рдмреА рдПрд╕рдПрд╕рдЖрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реИ рдЬреЛ рд╕рд╕реНрдкреЗрдВрд╕ рдФрд░ рд░рд┐рдПрдХреНрдЯред рдЖрд▓рд╕реА рдЕрднреА рддрдХ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рдЖрдк рдЙрди рд╕реБрд╡рд┐рдзрд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреВрд░реНрдг рдХреНрд▓рд╛рдЗрдВрдЯ рд╕рд╛рдЗрдЯ рдкрд░ рдЬрд╛ рд╕рдХрддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдЙрди рдкреГрд╖реНрдареЛрдВ рдХреА рд╕реНрдерд┐рд░ рдкреАрдврд╝реА рдХреЗ рд▓рд┐рдП рдЬреЛ рдЖрдк рджреБрдЦ рдХреА рдмрд╛рдд рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗред рдЬрдм рддрдХ SSR рдХрд╛ рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рд╣реЛ рдЬрд╛рддрд╛, рддрдм рддрдХ рд▓реЛрдб рдХрд░рдиреЗ рдЕрдиреБрд╢рдВрд╕рд╛ рдХрд░рддрд╛ рд╣реИ ред

рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдЯреАрдо рд╕реЗ рдореВрд▓ рдЕрдиреБрд╢рдВрд╕рд╛:
https://reactjs.org/docs/code-splitting.html#reactlazy

рд╕рд░реНрд╡рд░-рд╕рд╛рдЗрдб рд░реЗрдВрдбрд░рд┐рдВрдЧ рдХреЗ рд▓рд┐рдП React.lazy рдФрд░ рд╕рд╕реНрдкреЗрдВрд╕ рдЕрднреА рддрдХ рдЙрдкрд▓рдмреНрдз рдирд╣реАрдВ рд╣реИред рдпрджрд┐ рдЖрдк рд╕рд░реНрд╡рд░ рдкреНрд░рджрд╛рди рдХрд┐рдП рдЧрдП рдРрдк рдореЗрдВ рдХреЛрдб-рд╡рд┐рднрд╛рдЬрди рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рд╣рдо рд▓реЛрдб рдХрд░рдиреЗ рдпреЛрдЧреНрдп рдШрдЯрдХреЛрдВ рдХреА рдЕрдиреБрд╢рдВрд╕рд╛ рд╕рд░реНрд╡рд░-рд╕рд╛рдЗрдб рд░реЗрдВрдбрд░рд┐рдВрдЧ рдХреЗ рд╕рд╛рде рдмрдВрдбрд▓ рд╕реНрдкреНрд▓рд┐рдЯрд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рдПрдХ рдЕрдЪреНрдЫрд╛

рдЕрдЧрд░ рд╣рдо рдФрд░ рдорджрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ--рдХреГрдкрдпрд╛ рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рд╕рдВрдкрд░реНрдХ рдХрд░рдиреЗ рдпрд╛ рдЯрд┐рдкреНрдкрдгреА рдХрд░рдиреЗ рдореЗрдВ рд╕рдВрдХреЛрдЪ рди рдХрд░реЗрдВ, рдФрд░ рд╣рдореЗрдВ рдПрдХ рдФрд░ рдирдЬрд╝рд░ рдбрд╛рд▓рдиреЗ рдореЗрдВ рдЦреБрд╢реА рд╣реЛрдЧреАред

рдЧреИрдЯреНрд╕рдмреА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж

>рд╕рднреА рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдЦреЛрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдмрд╣реБрдд-рдмрд╣реБрдд рдзрдиреНрдпрд╡рд╛рдж! рдЬреИрд╕рд╛ рдХрд┐ рдХрд╣рд╛ рдЧрдпрд╛ рд╣реИ, рдпрд╣ рдЧреИрдЯреНрд╕рдмреА рдХреЗ рд▓рд┐рдП рдереЛрдбрд╝рд╛ рд╕реНрдкрд░реНрд╢рд░реЗрдЦрд╛ рд╣реИред

рдЧреИрдЯреНрд╕рдмреА рдПрд╕рдПрд╕рдЖрд░ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣рд╛ рд╣реИ рдЬреЛ рд╕рд╕реНрдкреЗрдВрд╕ рдФрд░ рд░рд┐рдПрдХреНрдЯред рдЖрд▓рд╕реА рдЕрднреА рддрдХ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред рдЖрдк рдЙрди рд╕реБрд╡рд┐рдзрд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдкреВрд░реНрдг рдХреНрд▓рд╛рдЗрдВрдЯ рд╕рд╛рдЗрдЯ рдкрд░ рдЬрд╛ рд╕рдХрддреЗ рд╣реИрдВ, рд▓реЗрдХрд┐рди рдЙрди рдкреГрд╖реНрдареЛрдВ рдХреА рд╕реНрдерд┐рд░ рдкреАрдврд╝реА рдХреЗ рд▓рд┐рдП рдЬреЛ рдЖрдк рджреБрдЦ рдХреА рдмрд╛рдд рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗред рдЬрдм рддрдХ SSR рдХрд╛ рд╕рдорд╛рдзрд╛рди рдирд╣реАрдВ рд╣реЛ рдЬрд╛рддрд╛, рддрдм рддрдХ рд▓реЛрдб рдХрд░рдиреЗ рдЕрдиреБрд╢рдВрд╕рд╛ рдХрд░рддрд╛ рд╣реИ ред

рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдЯреАрдо рд╕реЗ рдореВрд▓ рдЕрдиреБрд╢рдВрд╕рд╛:
https://reactjs.org/docs/code-splitting.html#reactlazy

рд╕рд░реНрд╡рд░-рд╕рд╛рдЗрдб рд░реЗрдВрдбрд░рд┐рдВрдЧ рдХреЗ рд▓рд┐рдП React.lazy рдФрд░ рд╕рд╕реНрдкреЗрдВрд╕ рдЕрднреА рддрдХ рдЙрдкрд▓рдмреНрдз рдирд╣реАрдВ рд╣реИред рдпрджрд┐ рдЖрдк рд╕рд░реНрд╡рд░ рдкреНрд░рджрд╛рди рдХрд┐рдП рдЧрдП рдРрдк рдореЗрдВ рдХреЛрдб-рд╡рд┐рднрд╛рдЬрди рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рд╣рдо рд▓реЛрдб рдХрд░рдиреЗ рдпреЛрдЧреНрдп рдШрдЯрдХреЛрдВ рдХреА рдЕрдиреБрд╢рдВрд╕рд╛ рд╕рд░реНрд╡рд░-рд╕рд╛рдЗрдб рд░реЗрдВрдбрд░рд┐рдВрдЧ рдХреЗ рд╕рд╛рде рдмрдВрдбрд▓ рд╕реНрдкреНрд▓рд┐рдЯрд┐рдВрдЧ рдХреЗ рд▓рд┐рдП рдПрдХ рдЕрдЪреНрдЫрд╛

рдЕрдЧрд░ рд╣рдо рдФрд░ рдорджрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ--рдХреГрдкрдпрд╛ рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рд╕рдВрдкрд░реНрдХ рдХрд░рдиреЗ рдпрд╛ рдЯрд┐рдкреНрдкрдгреА рдХрд░рдиреЗ рдореЗрдВ рд╕рдВрдХреЛрдЪ рди рдХрд░реЗрдВ, рдФрд░ рд╣рдореЗрдВ рдПрдХ рдФрд░ рдирдЬрд╝рд░ рдбрд╛рд▓рдиреЗ рдореЗрдВ рдЦреБрд╢реА рд╣реЛрдЧреАред

рдЧреИрдЯреНрд╕рдмреА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

mikestopcontinues picture mikestopcontinues  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

ghost picture ghost  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

Oppenheimer1 picture Oppenheimer1  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

ferMartz picture ferMartz  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

dustinhorton picture dustinhorton  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ