рдореБрдЭреЗ 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
рдЕрдЧрд░ рд╣рдо рдФрд░ рдорджрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ--рдХреГрдкрдпрд╛ рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рд╕рдВрдкрд░реНрдХ рдХрд░рдиреЗ рдпрд╛ рдЯрд┐рдкреНрдкрдгреА рдХрд░рдиреЗ рдореЗрдВ рд╕рдВрдХреЛрдЪ рди рдХрд░реЗрдВ, рдФрд░ рд╣рдореЗрдВ рдПрдХ рдФрд░ рдирдЬрд╝рд░ рдбрд╛рд▓рдиреЗ рдореЗрдВ рдЦреБрд╢реА рд╣реЛрдЧреАред
рдЧреИрдЯреНрд╕рдмреА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж