Today I Learn...

@zeit/next-bundle-analyzer

• 빌드된 파일을 트리맵 형식으로 어떤것들이 있는지 크기는 어느정도 되는지 알려주는 아주 유용한 플러그인
• next.config.js 소스코드

const withBundleAnalyzer = require("@zeit/next-bundle-analyzer");

module.exports = withBundleAnalyzer({
  analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
  analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
  bundleAnalyzerConfig: {
    server: {
      analyzerMode: 'static',
      reportFilename: '../../bundles/server.html'
    },
    browser: {
      analyzerMode: 'static',
      reportFilename: '../bundles/client.html'
    }
  }
});

• package.json 소스코드 (cross-env는 윈도우에서 해당 환경변수 사용할 수 있게 해줌)

...

"scripts": {
    "dev": "nodemon",
    "build": "cross-env BUNDLE_ANALYZE=both next build",
    "start": "cross-env NODE_ENV=production next start"
  },
    
...

• 빌드된 파일의 size가 1MB 안넘게 해주자!! => 코드스플리팅을 하던지 등.. (최적화)

• tree shaking

• gzip