๐Ÿ’ป @next/bundle-analyzer ์ ์šฉ์œผ๋กœ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ ์ตœ์ ํ™” (feat. next/dynamic)

waterglassesยท2022๋…„ 10์›” 28์ผ
0

๋ฆฌํŒฉํ† ๋ง

๋ชฉ๋ก ๋ณด๊ธฐ
1/6
post-thumbnail

โš ๏ธ ์ •๋ฆฌํ•œ ๋‚ด์šฉ์€ ์˜คํƒ€๋‚˜ ์ž˜๋ชป๋œ ์ •๋ณด๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ“๊ธ€๋กœ ์•Œ๋ ค์ฃผ์‹œ๋ฉด ๊ฐ์‚ฌํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

๋จผ์ € ๋น„๋“œ๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๋นŒ๋“œํ–ˆ์„ ๋•Œ ํŒŒ์ผ๋“ค์˜ ์šฉ๋Ÿ‰์ด ๋งค์šฐ ํฐ ๊ฒƒ์„ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๋ฒˆ๋“ค ํฌ๊ธฐ์— ๋Œ€ํ•ด์„œ ์ข€ ๋” ์ž์„ธํžˆ ํ™•์ธํ•ด๋ณด๊ธฐ ์œ„ํ•ด์„œ bundle-analyzer๋ฅผ ์ ์šฉํ•ด๋ณด์•˜๋‹ค.

@next.bundle-analyzer ์„ค์น˜ ๋ฐ ์ ์šฉ

npm install @next/bundle-analzyser ๋˜๋Š” yarn add @next/bundle-analyer ๋ช…๋ น์–ด๋กœ ์„ค์น˜๋ฅผ ํ•˜๊ณ  next.config.js ํŒŒ์ผ์— ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ ์šฉํ•œ๋‹ค.

// next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({});

๊ทธ ํ›„ ANALYZE=true next build ๋ช…๋ น์–ด๋กœ ์‹คํ–‰์„ ํ•˜๋ฉด client.html๊ณผ server.html๋กœ ๋‚˜๋ˆ„์–ด ๊ฒฐ๊ณผ๋ฅผ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

client.html

์—ฌ๊ธฐ์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋“ฏ์ด client์—์„œ๋Š” chakra-ui๊ฐ€ ๋Œ€๋ถ€๋ถ„์˜ ์šฉ๋Ÿ‰์„ ์ฐจ์ง€ํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

server.html

server์—์„œ๋Š” router์„ ์ œ์™ธํ•˜๊ณ  /products/productId, /product ๋“ฑ์˜ ํŒŒ์ผ์—์„œ ๋งŽ์€ ์šฉ๋Ÿ‰์„ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋‹ค.

chakra-ui ๋ฒˆ๋“ค ํฌ๊ธฐ ์ค„์ด๊ธฐ

๋น„๋“œ๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ๋ชจ๋“  ํŽ˜์ด์ง€์—์„œ chakra-ui๊ฐ€์ ธ์˜จ ๋ชจ๋“ˆ๋“ค์„ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ณ  ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋ฒˆ๋“ค ํฌ๊ธฐ๊ฐ€ ๋งค์šฐ ํฐ ๊ฒƒ์„ ๋ถ„์„ ๊ฒฐ๊ณผ๋กœ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.
๋”ฐ๋ผ์„œ chakra-ui์˜ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•ด์„œ๋Š” ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ์ง€ ๋ชฐ๋ผ์„œ ๊ตฌ๊ธ€๋ง์„ ํ•ด๋ณด์•˜๋‹ค.
๊ทธ ์ค‘ chakra-ui ๊นƒํ—ˆ๋ธŒ์˜ discussions์™€ issues์— ์˜ฌ๋ผ์˜จ ๋‚ด์šฉ์ด ์žˆ์—ˆ๋‹ค.

Reduce theme bundle size์™€ Chakra 2.x needs to reduce considerably JS bundle size์˜ ๋‚ด์šฉ์„ ํ™•์ธํ•ด ๋ณด๋ฉด chakra-ui์˜ framer-motion์ด ๋งŽ์€ ์šฉ๋Ÿ‰์„ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๊ณ  ์ง€๊ธˆ ํ˜„์žฌ๋กœ๋Š” ์‚ฌ์ด์ฆˆ๋ฅผ ์ค„์ผ ๋ฐฉ๋ฒ•์ด ์—†๋‹ค๊ณ  ํ•œ๋‹ค. (๋งŒ์•ฝ chakra์—์„œ ๋ฒˆ๋“ค ํฌ๊ธฐ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์œผ๋ฉด ๋Œ“๊ธ€๋กœ ๋ถ€ํƒ๋“œ๋ฆฝ๋‹ˆ๋‹ค.)

server ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ ์ค„์ด๊ธฐ

server ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ๋ฅผ ์ค„์ด๊ธฐ ์œ„ํ•ด ํŽ˜์ด์ง€์˜ ์‚ฌ์ด์ฆˆ๊ฐ€ ํฐ ํŒŒ์ผ๋“ค์„ next/dynamic์„ ์‚ฌ์šฉํ•ด์„œ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋™์  ๋กœ๋”ฉ ๋  ์ˆ˜ ์žˆ๋„๋ก ์ฝ”๋“œ๋ฅผ ์ˆ˜์ •ํ•˜์˜€๋‹ค.

import dynamic from 'next/dynamic';

const DynamicHeader = dynamic(() => import('./Header'));

์œ„์™€ ๊ฐ™์€ ํ˜•์‹์œผ๋กœ dynamic์„ ์ ์šฉ์‹œ์ผฐ๋‹ค.

์˜ˆ์‹œ๋กœ ์ƒํ’ˆ ์ƒ์„ธ ํŽ˜์ด์ง€์™€ ์ƒํ’ˆ ์ถ”๊ฐ€ ํŽ˜์ด์ง€ ๋‘ ํŽ˜์ด์ง€๋ฅผ ๋น„๊ตํ•ด๋ณด๊ฒ ๋‹ค.

1 - next/dynamic ์ ์šฉ ์ „ pages/products/[productid].js

products/id

1 - next/dynamic ์ ์šฉ ํ›„ [pages/products/[productid].js

products/id

2 - next/dynamic ์ ์šฉ ์ „ pages/product.js

product

2 - next/dynamic ์ ์šฉ ํ›„ pages/product.js

product

๋‘ ํŒŒ์ผ์„ ๋ณด๋ฉด ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ๊ฐ€ ๋งค์šฐ ์ค„์–ด๋“  ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ์ƒํ’ˆ ์ƒ์„ธ ํŽ˜์ด์ง€๋Š” 28kb๋‚˜ ์ค„์—ˆ๊ณ  ์ƒํ’ˆ ์ถ”๊ฐ€ ํŽ˜์ด์ง€๋Š” 16kb์ค„์—ˆ๋‹ค.

next/dynamic ์ ์šฉ ์ „ server.html

next/dynamic ์ ์šฉ ํ›„ server.html

๊ฒฐ๋ก ์ ์œผ๋กœ ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€์˜ next/dynamic์„ ์ ์šฉํ–ˆ์„ ๊ฒฝ์šฐ ์ „๊ณผ ํ›„์— ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ๋“ค์ด ๋งŽ์ด ์ค„์–ด๋“  ๊ฒƒ์„ ํ•œ ๋ˆˆ์— ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๐Ÿ”ฅ ๋Š๋‚€์ 

์ฒ˜์Œ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๋ฅผ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์‹œ์ž‘ํ•œ ์ž‘์—…์ด์ง€๋งŒ ๊ฒฐ๊ตญ chakra-ui๋กœ ์ธํ•ด ํด๋ผ์ด์–ธํŠธ ์†๋„๋Š” ๊ฐœ์„ ํ•˜์ง€ ๋ชปํ–ˆ๋‹ค. ํ•˜์ง€๋งŒ bundle-analyzer์„ ์ ์šฉ์„ ํ•ด์„œ ๋ฒˆ๋“ค ์‚ฌ์ด์ฆˆ๋ฅผ ์–ด๋–ป๊ฒŒ ์‚ดํŽด๋ณด๋Š”์ง€ ์•Œ ์ˆ˜ ์žˆ์—ˆ๊ณ  next/dynamic์„ ์ ์šฉํ•ด์„œ ์‹ค์ œ๋กœ ์‚ฌ์ด์ฆˆ๊ฐ€ ์–ด๋–ป๊ฒŒ ๊ฐœ์„ ๋˜๋Š”์ง€ ํ•œ ๋ˆˆ์— ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ์–ด์„œ ์ข‹์•˜๋‹ค.

Refer

profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€