19. [토이프로젝트 따라하기] 코드스플리팅

output 기본값

output: {
      path: isEnvProduction ? paths.appBuild : undefined,
      pathinfo: isEnvDevelopment,

      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      futureEmitAssets: true,
      chunkFilename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',

      publicPath: publicPath,
      devtoolModuleFilenameTemplate: isEnvProduction
        ? info =>
            path
              .relative(paths.appSrc, info.absoluteResourcePath)
              .replace(/\\/g, '/')
        : isEnvDevelopment &&
          (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},

 

optimization 기본값

optimization: {
      minimize: isEnvProduction,
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            parse: {
              ecma: 8,
            },
            compress: {
              ecma: 5,
              warnings: false,
              comparisons: false,
              inline: 2,
            },
            mangle: {
              safari10: true,
            },
            output: {
              ecma: 5,
              comments: false,
              ascii_only: true,
            },
          },
          parallel: !isWsl,
          cache: true,
          sourceMap: shouldUseSourceMap,
        }),
        new OptimizeCSSAssetsPlugin({
          cssProcessorOptions: {
            parser: safePostCssParser,
            map: shouldUseSourceMap
              ? {
                  inline: false,
                  annotation: true,
                }
              : false,
          },
        }),
      ],
      splitChunks: {
        chunks: 'all',
        name: false,
      },
      runtimeChunk: true,
},

---

entry: {
      app:[paths.appIndexJs],
      vendor:['react','react-dom','react-router-dom','redux','axios','codemirror','prismjs'],
},

File sizes after gzip:

  111 KB    build\static\js\0.4a75b702.chunk.js
  79.14 KB  build\static\js\5.13f119ea.chunk.js
  6.42 KB   build\static\js\app.0fd28d57.chunk.js
  2.41 KB   build\static\css\app.ad912254.chunk.css
  2.32 KB   build\static\css\5.70aff549.chunk.css
  766 B     build\static\js\runtime~vendor.55369e7e.js
  763 B     build\static\js\runtime~app.2d775093.js
  177 B     build\static\js\vendor.36466b19.chunk.js

---

entry: {
      app:[paths.appIndexJs],
},

File sizes after gzip:

  187.93 KB        build\static\js\2.21bc65c8.chunk.js
  6.37 KB (-48 B)  build\static\js\app.1f9a4c0d.chunk.js
  2.41 KB          build\static\css\app.ad912254.chunk.css
  2.32 KB          build\static\css\2.70aff549.chunk.css
  762 B (-1 B)     build\static\js\runtime~app.8707b7b1.js

 

---

 runtimeChunk: flase // 기본값 : true

entry: {
      app:[paths.appIndexJs],
      vendor:['react','react-dom','react-router-dom','redux','axios','codemirror','prismjs'],
},

File sizes after gzip:

  111 KB           build\static\js\0.4a75b702.chunk.js
  79.14 KB         build\static\js\3.a3f4ada5.chunk.js
  6.99 KB (+47 B)  build\static\js\app.e93d4ca5.js
  2.41 KB          build\static\css\app.ad912254.css
  2.32 KB          build\static\css\3.70aff549.chunk.css
  797 B            build\static\js\vendor.cb724dcf.js

 

---

 runtimeChunk: flase // 기본값 : true

entry: {
      app:[paths.appIndexJs, require.resolve('react-dev-utils/webpackHotDevClient')],
      vendor:['react','react-dom','react-router-dom','redux','axios','codemirror','prismjs'],
},

File sizes after gzip:

  111 KB            build\static\js\0.4a75b702.chunk.js
  79.14 KB          build\static\js\3.a3f4ada5.chunk.js
  6.99 KB           build\static\js\app.e93d4ca5.js
  2.41 KB (+128 B)  build\static\css\app.ad912254.css
  2.32 KB (-4 B)    build\static\css\3.70aff549.chunk.css
  797 B             build\static\js\vendor.cb724dcf.js

 

 

---

책버전 : webpack 3 버전 이하

실습버전 : webpack 4 버전

Extract Text Plugin DEPRECATED으로 인해 mini-css-extract-plugin 시도

https://github.com/webpack-contrib/extract-text-webpack-plugin#usage

webpack-contrib/extract-text-webpack-plugin

https://github.com/webpack-contrib/mini-css-extract-plugin

webpack-contrib/mini-css-extract-plugin

 

예시)

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
};

 

참고한사이트 : https://github.com/webpack-contrib/mini-css-extract-plugin/issues/45

Support multiple instances of MiniCssExtractPlugin · Issue #45 · webpack-contrib/mini-css-extract-plugin

https://github.com/james-s-turner/webpack4-multi-theme/blob/master/webpack-config.js

james-s-turner/webpack4-multi-theme

https://stackoverflow.com/questions/48453986/defining-path-to-scss-files

Defining path to scss files

 

// 삭제
const getStyleLoaders = (cssOptions, preProcessor) => {
(...)
}

// 아래 관련 코드 다 삭제
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

 

아래코드로 대체

{
              test: /\.(sa|sc|c)ss$/,              
              use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                {
                  loader : "sass-loader",             
                  options: {  includePaths: [paths.appSrc + '/styles']},    
                },                
              ],
}, 

MiniCssExtractPlugin 플러그인은 ctrl+F 로 잘찾아보면 아래와같이 이미 작성되어있다.

	isEnvProduction &&
        new MiniCssExtractPlugin({
          filename: 'static/css/[name].[contenthash:8].css',
          chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
        }),

 

File sizes after gzip:

  111 KB            build\static\js\0.4a75b702.chunk.js
  79.14 KB          build\static\js\3.a3f4ada5.chunk.js
  6.99 KB           build\static\js\app.e93d4ca5.js
  2.33 KB (+4 B)    build\static\css\3.726c47e5.chunk.css
  2.28 KB (-128 B)  build\static\css\app.8de5af0a.css
  797 B             build\static\js\vendor.cb724dcf.js

 

---

결론 : 코드 스플리팅 방법은 알았으나 create-react-app v2 는 MinicssExtractPlugin이 이미 적용되어 있는것으로 보인다.

 

마지막 예시처럼 굳이 코드삭제하고 붙일필요가 없어보인다.

 

내시간...