번들링이란 모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업을 뜻합니다

⇒ webpack이란 모듈번들러가 해준다.

• google Insights 측정

• 모바일

• 데스크톱

개발자 도구를 통한 번들 size 측정

측정 도구

Tool: @next/bundle-analyzer

cmd

yarn add @next/bundle-analyzer

next.config.js

const withPlugins = require('next-compose-plugins')
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

module.exports = withPlugins([
  [withBundleAnalyzer],
  // your other plugins here
])

cmd

ANALYZE=true yarn build

번들 측정

• server.html

• client.html