Webpack 최적화 - 프로덕션 준비가 된 React 앱

Webpack은 최신 JavaScript 애플리케이션(예: React)을 위한 정적 모듈 번들러입니다. 웹팩이 애플리케이션을 처리할 때 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 종속성 그래프를 내부적으로 빌드합니다.

이 블로그에 사용된 코드/구성은 this 저장소에서 사용할 수 있습니다.

React 애플리케이션을 위한 간단한 webpack.config.js는 다음과 같습니다.

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = {
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  resolve: {
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    alias: {
      react: path.join(__dirname, 'node_modules', 'react'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
        ],
      },
      { // If you are not using less ignore this rule
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: './index.html',
    }),
  ],
};

기본적으로 위의 구성으로 webpack은 하나의 JS 번들 파일을 생성합니다. 대규모 프로젝트/애플리케이션의 경우 이 번들 크기가 매우 커집니다(MiB 단위). 따라서 단일 번들을 여러 청크로 분할하고 필요할 때만 로드하는 것이 필수적입니다.

React에서 lazy loading이 들어오는 곳입니다. 기본적으로 필요할 때만 구성 요소를 가져옵니다. 경로 수준의 지연 로딩 구성 요소는 좋은 시작입니다.

구성 요소를 지연 로드할 때 webpack은 추가 구성 없이 경로를 기반으로 여러 번들 파일을 생성합니다.



번들에 대한 해시 파일 이름을 사용할 수 있으며, 이는 해당 특정 청크에서 수정을 수행한 후 앱을 빌드할 때만 변경됩니다. 따라서 변경 사항이 없으면 동일한 해시가 유지되고 브라우저는 캐시에서 해당 번들 파일을 제공합니다. 다른 해시 옵션은 this을 참조하십시오.

output: {
  path: path.resolve(__dirname, 'build'),
  filename: '[name].[chunkhash].bundle.js',
}

웹팩에서 추가 구성 없이 경로를 기반으로 번들을 분할하는 것이 좋지만 여전히 기본 번들에는 모든 공급업체 코드(node_modules)가 포함되어 있습니다. 몇 가지 구성을 추가하여 webpack에 번들을 추가로 추가하는 방법을 알려줄 수 있습니다.

optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        test: /node_modules\/(?!antd\/).*/,
        name: "vendors",
        chunks: "all",
      },
      // This can be your own design library.
      antd: {
        test: /node_modules\/(antd\/).*/,
        name: "antd",
        chunks: "all",
      },
    },
  },
  runtimeChunk: {
    name: "manifest",
  },
}

구성을 살펴보겠습니다. optimization.splitChunks.cacheGroups는 청크를 정의하는 곳입니다. 여기서는 vendors(Ant Design은 UI 구성 요소 라이브러리임)를 제외하고 node_modules의 모든 종속성에 대해 청크 이름antd을 사용했고 Ant 디자인 종속성에만 청크 이름antd을 사용했습니다.

공급업체를 분리하는 이유는 프로젝트가 성숙해지면 새 종속성을 자주 추가하지 않기 때문에 청크 파일 이름 해시가 모든 빌드에 대해 변경되지 않고 브라우저가 이 공급업체 청크를 제공할 수 있기 때문입니다. 캐시에서.
antd는 구성 요소를 자주 추가/업데이트하는 자체 설계 라이브러리가 될 수 있으므로 이 청크의 변경 사항이 공급업체 청크 해시에 영향을 미치지 않아야 하기 때문에 벤더 청크에서 antd를 분리했습니다.
또한 웹팩이 유지 관리하는 매니페스트를 추출하여 애플리케이션을 실행하는 데 필요한 정보를 포함했습니다.

빌드 출력을 확인했다면 공급업체 청크가 노란색으로 강조 표시되고 [big]으로 표시됩니다. Webpack은 번들 크기가 244KiB보다 큰 경우 경고하도록 구성되어 있습니다. 어쨌든 번들을 gzip으로 압축하고 네트워크를 통해 전송해야 하므로 이 경고를 무시해도 됩니다. 이 gzip 인코딩은 netlify, serve과 같은 일부 정적 파일 서버에서 기본적으로 수행되며 다른 서버AWS CloudFront에서 구성하기 쉽습니다.
어쨌든, gzip을 압축하고 웹팩이 계산을 위해 gzip 파일을 사용하도록 지시하려면 아래 구성을 추가할 수 있습니다.

const CompressionPlugin = require('compression-webpack-plugin');

plugins: [
  new CompressionPlugin({
    test: /\.js(\?.*)?$/i,
  }),
],
performance: {
  hints: "warning",
  // Calculates sizes of gziped bundles.
  assetFilter: function (assetFilename) {
    return assetFilename.endsWith(".js.gz");
  },
}

요약하자면,

반응 앱을 실행하기 위한 최소 웹팩 구성을 설정했습니다.

지연 로드를 사용하여 단일 번들을 여러 청크로 분할했습니다.

번들 파일의 버전을 지정하기 위해 해시 파일 이름을 사용했습니다.

공급업체 및 antd 청크를 추가로 생성하는 기본 번들을 뱉습니다.

웹팩 번들 크기 경고를 피하기 위해 gzip을 사용하여 번들을 압축했습니다(정적 호스팅 서버에서도 수행해야 함).

전체 웹팩 구성을 볼 수 있습니다here.

그게 다야, 여러분, 이 블로그를 읽어주셔서 감사합니다. 도움이 되었기를 바랍니다. 귀하의 질문과 제안에 의견을 보내주십시오.

참조:

https://reactjs.org/docs/code-splitting.html

https://webpack.js.org/configuration/optimization/

https://webpack.js.org/plugins/split-chunks-plugin/

https://webpack.js.org/configuration/performance/