@zeit/next-bundle-analyzer

박동건·2020년 6월 10일
0

TIL(2020)

목록 보기
37/49

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

profile
박레고의 개발 블로그

0개의 댓글