SCSS에서 CSS 추출, React App에서의 동적 로딩 및 캐싱을 mini-css-extract-plugin을 사용하여 수행하기

SCSS에서 CSS 추출 및 React 앱에서 지연 로딩

React 앱에서 SCSS 테마 파일 작업을 할 때, SCSS 파일을 별도의 CSS 파일로 추출하고 이후 페이지에 로드하는 것은 조직화와 최적화를 위해 유용할 수 있습니다. 이를 통해 contenthash를 사용하여 장기 캐싱을 할 수도 있습니다.

Mini CSS Extract Plugin 사용하기

Webpack 4를 사용하는 경우, 이를 구현하기 위한 한 가지 방법은 mini-css-extract-plugin을 사용하는 것입니다. 이 플러그인을 사용하면 CSS를 별도의 파일로 추출할 수 있습니다. 다음은 webpack.config.js에서 어떻게 플러그인을 구성하는 예입니다:

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
      chunkFilename: "[id].[contenthash].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "sass-loader"
        ]
      }
    ]
  }
}

이 구성에서, 우리는 [contenthash]를 사용하여 추출된 CSS 파일의 파일 이름 형식을 지정합니다. 이를 통해 파일의 장기 캐싱이 가능합니다.

SCSS 테마 분리하기

이제 플러그인을 구성했으므로, SCSS 테마를 별도의 CSS 파일로 분리하기 위한 규칙을 정의할 수 있습니다. 이를 위해 Webpack의 splitChunks 최적화를 사용하겠습니다. 다음은 예시입니다:

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        'vendor': {},
        'theme-a': {
          test: /theme-a\.scss/,
          chunks: 'all',
          enforce: true
        },
        'theme-b': {
          test: /theme-b\.scss/,
          chunks: 'all',
          enforce: true
        }
        // 기타 테마
      }
    }
  }
}

이 예시에서는 theme-a.scss와 theme-b.scss와 같은 각각의 SCSS 테마 파일에 대해 별도의 캐시 그룹을 정의합니다. 각 테마 파일을 일치시키기 위해 테스트 정규식 패턴을 지정합니다. chunks: 'all' 및 enforce: true를 설정하여 각 테마 CSS 파일을 분리하고 추출합니다.

동적으로 CSS 로드하기

React 앱에서 CSS 파일을 동적으로 로드하기 위해 동적 임포트를 사용할 수 있습니다. 다음은 예시입니다:

// app.js
class App extends React.Component {
  login(themeName) {
    import(/* webpackChunkName: "`${themeName}`" */ `./path/to/${themeName}.scss`).then(theme => {
      // 로드된 테마를 사용합니다.
    });
  }

  // 기타 내용들
}

login() 메소드에서는 제공된 themeName을 기반으로 테마 CSS 파일을 동적으로 임포트합니다. CSS 파일이 로드되면, 우리는 애플리케이션 로직에서 필요한 대로 테마를 사용할 수 있습니다.

결론

SCSS 파일에서 CSS를 추출하고 동적 로딩 기술을 사용함으로써, React 앱에서 더 나은 조직화와 최적화를 실현할 수 있습니다. mini-css-extract-plugin과 Webpack의 splitChunks 최적화는 SCSS 테마를 다루고 성능을 향상시키는 강력한 도구를 제공합니다.

이 가이드가 React 앱에서 SCSS 테마에서 동적으로 CSS 파일을 추출하고 로드하는 것을 도움이 되기를 바랍니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs