빌드하기

1. package.json에 "build": "next build"이 있는지 확인. 없으면넣어준다.

"scripts": {
    "dev": "next",
    "build": "next build" // 이거 넣어준다.
  },

2. 빌드하기

터미널에 npm run build 입력하면 빌드를 시작한다.
빌드를 시작하면 결과물로 번들링된 javascript가 출력된다.

빨간색은 용량이 크다는것이므로 이런것은 줄여주면좋다.
하지만 집착하지는말자 1메가 이하면 그냥 배포하는게 좋다. 나는 일부러 줄여보기위해서 dayjs말고 moment를 사용했기때문에 줄여보겠다.

근데 뭐가 큰지알고 어떻게줄일까? (tree shaking 등의 검색어로 찾을수있음)
우선 npm i @next/bundle-analyzer 설치
front 루트에 next.config.js파일을 만들고 다음과같이 넣는다.

// 웹팩바꾸기
/* 
    withBundleAnalyzer enabled:true, process.env.NODE_ENV === "production" 하기위해 package.json build에 추가
    => 하지만 윈도우에서는 작동하지 않음 => npm i cross-env
*/
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({
  compress: true, // gzip압축
  webpack(config, { webpack }) {
    const prod = process.env.NODE_ENV === "production";
    const plugins = [
      ...config.plugins,
      new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /^\.\ko$/), // moment 용량 넘 커서 ko만 쓰기
    ];

    return {
      ...config,
      mode: prod ? "production" : "development",
      devtool: prod ? "hidden-source-map" : "eval", // 배포할때 hidden-source-map안하면 배포할떄 코드다노출됨
      plugins,
    };
  },
});

moment ko만 사용하려면 plugin을 수정해야해서 @next/bundle-analyzer을 사용해주고

package.json파일의 build부분을 수정해준다.
withBundleAnalyzer enabled:true, process.env.NODE_ENV === "production" 하기위해 package.json build에 추가했다.
하지만 윈도우에서는 작동하지 않으므로 호환을위해 npm i cross-env를 설치하고 앞에 cross-env를 넣어주면 윈도우에서도 잘보인다.

"scripts": {
    "dev": "next",
    "build": "cross-env NODE_ENV=production ANALYZE=true next build"
  },

이제 다시 npm run build 하면 용량이 줄은것을 확인할수있다.
// concatenated는 파일이 합쳐진것이므로 조절할수없다.
(전)

(후)