<Suspense>
์ฌ์ฉํ ๋๋ง yarn build
์ ์ค๋ฅ๊ฐ ์์ต๋๋ค.
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
๋น๋๊ฐ ์ฑ๊ณตํด์ผ ํฉ๋๋ค.
๋น๋๊ฐ ์คํจํฉ๋๋ค.
์ฒด๊ณ:
์ด์ ์ฒด์ : macOS 10.14.2
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
์
ธ: 3.2.57 - /bin/bash
๋ฐ์ด๋๋ฆฌ:
๋
ธ๋: 11.9.0 - /usr/local/bin/node
์์ฌ: 1.13.0 - /usr/local/bin/yarn
npm: 6.5.0 - /usr/local/bin/npm
์ธ์ด:
ํ์ด์ฌ: 2.7.10 - /usr/bin/python
๋ธ๋ผ์ฐ์ :
ํฌ๋กฌ: 72.0.3626.109
ํ์ด์ดํญ์ค: 65.0.1
์ฌํ๋ฆฌ: 12.0.2
npmํจํค์ง:
๊ฐ์ธ ๋น: ^2.0.0 => 2.0.118
๊ฐ์ธ ๋น-cli: ^2.4.6 => 2.4.9
๊ฐ์ธ ๋น ์ด๋ฏธ์ง: ^2.0.26 => 2.0.29
๊ฐ์ธ ๋น ํ๋ฌ๊ทธ์ธ ๊ฐ์ : ^4.0.1 => 4.0.3
๊ฐ์ธ ๋น ํ๋ฌ๊ทธ์ธ ๋ฐ์ ํฌ๋ฉง: ^3.0.0 => 3.0.6
๊ฐ์ธ ๋น ํ๋ฌ๊ทธ์ธ ์คํ: ^2.0.17 => 2.0.20
๊ฐ์ธ ๋น ์์ค ํ์ผ ์์คํ
: ^2.0.12 => 2.0.20
๊ฐ์ธ ๋น ํธ๋์คํฌ๋จธ ์คํ: ^2.1.10 => 2.1.13
npmGlobalํจํค์ง:
๊ฐ์ธ ๋น-cli: 2.4.8
์ด ๋ฌธ์ ๋ฅผ ์ด์ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค! ์ธ๊ธํ๋ฏ์ด ์ด๊ฒ์ Gatsby์ ์ฝ๊ฐ ์ ํฉ๋๋ค.
Gatsby๋ Suspense & React.Lazy๊ฐ ์์ง ์ง์ํ์ง ์๋ SSR์ ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ธฐ ์ํด ์ ์ฒด ํด๋ผ์ด์ธํธ ์ฌ์ดํธ๋ก ์ด๋ํ ์ ์์ง๋ง ์ฌํ๊ฒ๋ ํ์ด์ง์ ์ ์ ์์ฑ์ ๊ฐ์ง ์ ์์ต๋๋ค. React ๋ SSR์ด ํด๊ฒฐ๋ ๋๊น์ง Loadable ๊ตฌ์ฑ ์์ ํจํค์ง ๋ฅผ ์ฌ์ฉํ๋๋ก ๊ถ์ฅํฉ๋๋ค.
React Team์ ์๋ ์ถ์ฒ:
https://reactjs.org/docs/code-splitting.html#reactlazy
React.lazy ๋ฐ Suspense๋ ์์ง ์๋ฒ ์ธก ๋ ๋๋ง์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์๋ฒ ๋ ๋๋ง ์ฑ์์ ์ฝ๋ ๋ถํ ์ ์ํํ๋ ค๋ฉด Loadable Components๋ฅผ ๊ถ์ฅํฉ๋๋ค. ์ฌ๊ธฐ์๋ ์๋ฒ ์ธก ๋ ๋๋ง์ ์ฌ์ฉํ ๋ฒ๋ค ๋ถํ ์ ๋ํ ์ข์
์ถ๊ฐ๋ก ๋์์ ๋๋ฆด ์ ์๋ ๊ฒฝ์ฐ ์ฃผ์ ํ์ง ๋ง๊ณ ์ด ๋ฌธ์ ์ ๋ํด ์ฐ๋ฝํ๊ฑฐ๋ ์๊ฒฌ์ ๋ง์ํด ์ฃผ์ธ์. ๋ค์ ๊ฒํ ํด ๋ณด๊ฒ ์ต๋๋ค.
๊ฐ์ธ ๋น ๐ช๋ฅผ ์ด์ฉํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด ๋ฌธ์ ๋ฅผ ์ด์ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค! ์ธ๊ธํ๋ฏ์ด ์ด๊ฒ์ Gatsby์ ์ฝ๊ฐ ์ ํฉ๋๋ค.
Gatsby๋ Suspense & React.Lazy๊ฐ ์์ง ์ง์ํ์ง ์๋ SSR์ ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ๋ฅ์ ์ฌ์ฉํ๊ธฐ ์ํด ์ ์ฒด ํด๋ผ์ด์ธํธ ์ฌ์ดํธ๋ก ์ด๋ํ ์ ์์ง๋ง ์ฌํ๊ฒ๋ ํ์ด์ง์ ์ ์ ์์ฑ์ ๊ฐ์ง ์ ์์ต๋๋ค. React ๋ SSR์ด ํด๊ฒฐ๋ ๋๊น์ง Loadable ๊ตฌ์ฑ ์์ ํจํค์ง ๋ฅผ ์ฌ์ฉํ๋๋ก ๊ถ์ฅํฉ๋๋ค.
React Team์ ์๋ ์ถ์ฒ:
https://reactjs.org/docs/code-splitting.html#reactlazy
์ถ๊ฐ๋ก ๋์์ ๋๋ฆด ์ ์๋ ๊ฒฝ์ฐ ์ฃผ์ ํ์ง ๋ง๊ณ ์ด ๋ฌธ์ ์ ๋ํด ์ฐ๋ฝํ๊ฑฐ๋ ์๊ฒฌ์ ๋ง์ํด ์ฃผ์ธ์. ๋ค์ ๊ฒํ ํด ๋ณด๊ฒ ์ต๋๋ค.
๊ฐ์ธ ๋น ๐ช๋ฅผ ์ด์ฉํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.