CRACO React esbuild with speed-measure-webpack-plugin

https://github.com/stephencookdev/speed-measure-webpack-plugin

GitHub - stephencookdev/speed-measure-webpack-plugin: ⏱ See how fast (or not) your plugins and loaders are, so you can optimis

CRACO 환경에서 speed-measure-webpack-plugin를 사용하기 위해선 다음과 같이 설정하면 된다.

 

단, CRACO 환경에서 speed-measure-webpack-plugin를 적용시키면 버그가 있다. 현재 Github CI/CD Action을 통해서 빌드 후 자동으로 S3로 배포하고 있는데 webpack config이 오버라이딩 되면서 HtmlWebpackPlugin가 정상적으로 동작하지 않는다.

 

이로 인해서 %PUBLIC_URL%이 치환되지 않기 때문에 클라이언트에서 favicon.ico나 manifest.json 등이 로드가 안되는 이슈가 생겼다.

 

해결 해보려고 했으나 해결 불가.. 그래도 빌드 속도 측정은 꼭 해야겠다 싶으면 다음과 같이 적용시키면 된다. (배포할때는 빼는 것도 나쁘지 않은 방법인듯)

 

const CracoAlias = require("craco-alias");
const CracoEsbuildPlugin = require('craco-esbuild');
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();


module.exports = {
    webpack: {
        // when i using the smp.wrap will be occur bug (PUBLIC_URL doesn't work).
        configure: webpackConfig => smp.wrap(webpackConfig),
    },
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: "jsconfig",
                jsConfigPath: "jsconfig.paths.json",
            },
        },
        {
            plugin: CracoEsbuildPlugin,
            options: {
                esbuildLoaderOptions: {
                    // Optional. Defaults to auto-detect loader.
                    loader: 'tsx', // Set the value to 'tsx' if you use typescript
                    target: 'es2015',
                },
                esbuildMinimizerOptions: {
                    // Optional. Defaults to:
                    target: 'es2015',
                    css: true, // if true, OptimizeCssAssetsWebpackPlugin will also be replaced by esbuild.
                },
                esbuildJestOptions: {
                    sourcemap: false,
                    loaders: {
                        '.ts': 'ts',
                        '.js': 'tsx',
                        '.jsx': 'tsx',
                        '.tsx': 'tsx',
                    },
                },
            },
        },
        {
            plugin: {
                overrideCracoConfig: ({ cracoConfig, pluginOptions, context: { env, paths } }) => {
                    return cracoConfig;
                },
                overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {
                    return webpackConfig;
                },
                overrideDevServerConfig: ({ devServerConfig, cracoConfig, pluginOptions, context: { env, paths, proxy, allowedHost } }) => {
                    return devServerConfig;
                },
                overrideJestConfig: ({ jestConfig, cracoConfig, pluginOptions, context: { env, paths, resolve, rootDir } }) => {
                    return jestConfig
                },
            },
            options: {},
        },
    ],
};

craco.config.js: CRACO 기본 설정 파일

 

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"],
      "assets/*": ["./src/assets/*"]
    }
  }
}

jsconfig.json: 절대경로로 import할 수 있도록 설정

 

 nopsled@playground  ~/WebstormProjects/copies-client-v2   main  npm run build

> copies-client-v2@0.1.0 build /Users/nopsled/WebstormProjects/copies-client-v2
> CI=false craco build

Creating an optimized production build...
^C


npm run build

> copies-client-v2@0.1.0 build /Users/nopsled/WebstormProjects/copies-client-v2
> CI=false craco build

Creating an optimized production build...


 SMP  ⏱  
General output time took 52.29 secs

 SMP  ⏱  Plugins
IgnorePlugin took 6.6 secs
ESLintWebpackPlugin took 3.71 secs
CKEditorWebpackPlugin took 2.28 secs
HtmlWebpackPlugin took 0.201 secs
ManifestPlugin took 0.111 secs
CopyPlugin took 0.036 secs
MiniCssExtractPlugin took 0.022 secs
InlineChunkHtmlPlugin took 0.002 secs
InterpolateHtmlPlugin took 0.002 secs
ModuleNotFoundPlugin took 0.001 secs
DefinePlugin took 0 secs

 SMP  ⏱  Loaders
mini-css-extract-plugin, and 
css-loader, and 
postcss-loader, and 
resolve-url-loader, and 
sass-loader took 35.13 secs
  module count = 2
css-loader, and 
postcss-loader, and 
resolve-url-loader, and 
sass-loader took 35.003 secs
  module count = 7
modules with no loaders took 32.57 secs
  module count = 3170
postcss-loader took 23.99 secs
  module count = 56
esbuild-loader took 15.5 secs
  module count = 356
raw-loader took 3.24 secs
  module count = 61
url-loader took 2.29 secs
  module count = 34
mini-css-extract-plugin, and 
css-loader, and 
postcss-loader took 2.29 secs
  module count = 5
css-loader, and 
postcss-loader took 2.15 secs
  module count = 5
file-loader took 1.64 secs
  module count = 40
style-loader, and 
postcss-loader took 0.125 secs
  module count = 56
html-webpack-plugin took 0.022 secs
  module count = 1

설정하고 빌드해보면 위와 같이 보인다.

 

아무튼 CRACO 환경에서 speed-measure-webpack-plugin을 적용하면 %PUBLIC_URL%이 치환되지 않는 버그가 있다는 것만 알아주시면될 것 같다.