Warning from PackFileCacheStrategy: Serializing big strings (747kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)

See original GitHub issue

Bug report

What is the current behavior? The same warnings occur multiple times when compile is finished. I add console.trace() as https://github.com/webpack-contrib/mini-css-extract-plugin/issues/643 mentioned.

[webpack.cache.PackFileCacheStrategy] Serializing big strings (361kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
Trace
    at process (C:\Users\...\react-ts\node_modules\webpack\lib\serialization\ObjectMiddleware.js:501:14)
    at write (C:\Users\...\react-ts\node_modules\webpack\lib\serialization\ObjectMiddleware.js:387:6)
    at PlainObjectSerializer.serialize (C:\Users\...\react-ts\node_modules\webpack\lib\serialization\PlainObjectSerializer.js:56:5)
    at process (C:\Users\...\react-ts\node_modules\webpack\lib\serialization\ObjectMiddleware.js:480:17)
    at write (C:\Users\...\react-ts\node_modules\webpack\lib\serialization\ObjectMiddleware.js:387:6)
    at MapObjectSerializer.serialize (C:\Users\...\react-ts\node_modules\webpack\lib\serialization\MapObjectSerializer.js:14:4)
    at process (C:\Users\...\react-ts\node_modules\webpack\lib\serialization\ObjectMiddleware.js:480:17)
    at write (C:\Users\...\react-ts\node_modules\webpack\lib\serialization\ObjectMiddleware.js:387:6)
    at PackContentItems.serialize (C:\Users\...\react-ts\node_modules\webpack\lib\cache\PackFileCacheStrategy.js:655:4)
    at ClassSerializer.serialize (C:\Users\...\react-ts\node_modules\webpack\lib\util\makeSerializable.js:15:7)

If the current behavior is a bug, please provide the steps to reproduce. It is a pretty large project, and I cannot reproduce the issue currently. Maybe you can offer some instructions?

What is the expected behavior? No warnings.

Other relevant information: webpack version: 5.51.1 Node.js version: v16.13.0 Operating System: Windows 10

package.json

  "dependencies": {
    "@ant-design/icons": "^4.0.0-alpha.18",
    "@antv/f2": "^3.6.4-beta.2",
    "@antv/g2": "^4.1.11",
    "@antv/g2plot": "^2.3.2",
    "@babel/runtime": "^7.6.3",
    "@babel/runtime-corejs3": "^7.7.7",
    "@loadable/component": "^5.10.3",
    "@material-ui/core": "^4.8.3",
    "@material-ui/styles": "^4.9.14",
    "@reduxjs/toolkit": "^1.6.1",
    "@tippyjs/react": "^4.2.5",
    "@types/numeral": "0.0.28",
    "animate.css": "^3.7.2",
    "antd": "4.1.4",
    "antd-dayjs-webpack-plugin": "^1.0.0",
    "antd-mobile": "^2.3.1",
    "axios": "^0.21.1",
    "better-xlsx": "^0.7.5",
    "bignumber.js": "^9.0.0",
    "bizcharts": "^3.5.9",
    "bizgoblin": "^0.2.0",
    "blueimp-md5": "^2.12.0",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
    "crypto-js": "^3.1.9-1",
    "dayjs": "^1.8.18",
    "file-saver": "^2.0.5",
    "fingerprintjs2": "^2.1.0",
    "html2canvas": "1.0.0-rc.4",
    "jquery": "^3.5.1",
    "js-audio-recorder": "^1.0.7",
    "js-base64": "^2.5.1",
    "js-cookie": "^2.2.1",
    "jstz": "^2.1.1",
    "klinecharts": "7.5.0",
    "lamejs": "^1.2.0",
    "lodash": "^4.17.15",
    "lodash.random": "^3.2.0",
    "lodash.samplesize": "^4.2.0",
    "moment": "^2.29.1",
    "numeral": "^2.0.6",
    "pako": "^1.0.10",
    "qrcode.react": "^1.0.0",
    "qs": "^6.9.1",
    "react": "^17.0.2",
    "react-color": "^2.19.3",
    "react-content-loader": "^4.3.4",
    "react-copy-to-clipboard": "^5.0.3",
    "react-dom": "^17.0.2",
    "react-globe": "^5.0.2",
    "react-grid-layout": "^1.1.1",
    "react-helmet": "^6.1.0",
    "react-lazyload": "^2.6.5",
    "react-number-format": "^4.3.1",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.1",
    "react-slick": "^0.26.1",
    "react-transition-group": "^4.4.2",
    "reconnecting-websocket": "^4.2.0",
    "redux": "^4.1.1",
    "redux-thunk": "^2.3.0",
    "slick-carousel": "^1.8.1",
    "sprintf-js": "^1.1.2",
    "three": "0.109.0",
    "tim-js-sdk": "^2.15.0",
    "tim-upload-plugin": "^1.0.3",
    "trading-view": "^1.0.7",
    "trim-newlines": "^3.0.1",
    "ua-parser-js": "^0.7.20",
    "use-error-boundary": "^2.0.6",
    "use-long-press": "^1.1.1",
    "web-widget": "^0.3.6"
  },
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/plugin-transform-typescript": "^7.15.4",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@babel/preset-typescript": "^7.15.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.6",
    "@types/blueimp-md5": "^2.7.0",
    "@types/crypto-js": "^3.1.43",
    "@types/file-saver": "^2.0.1",
    "@types/fingerprintjs2": "^2.0.0",
    "@types/jquery": "^3.5.5",
    "@types/js-base64": "^2.3.1",
    "@types/js-cookie": "^2.2.4",
    "@types/loadable__component": "^5.10.0",
    "@types/lodash": "^4.14.144",
    "@types/mockjs": "^1.0.2",
    "@types/node": "^12.12.47",
    "@types/pako": "^1.0.1",
    "@types/puppeteer": "^3.0.1",
    "@types/qrcode.react": "^1.0.0",
    "@types/qs": "^6.5.3",
    "@types/react": "^16.9.34",
    "@types/react-copy-to-clipboard": "^4.3.0",
    "@types/react-dom": "^16.9.6",
    "@types/react-grid-layout": "^0.17.2",
    "@types/react-helmet": "^5.0.16",
    "@types/react-lazyload": "^2.6.0",
    "@types/react-redux": "^7.1.5",
    "@types/react-router-dom": "^5.1.1",
    "@types/react-slick": "^0.23.4",
    "@types/sprintf-js": "^1.1.2",
    "@types/ua-parser-js": "^0.7.33",
    "@types/webpack-env": "^1.16.0",
    "@typescript-eslint/eslint-plugin": "^2.6.0",
    "@typescript-eslint/parser": "^2.6.0",
    "autoprefixer": "^10.3.6",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-import": "^1.12.2",
    "babel-plugin-lodash": "^3.3.4",
    "circular-dependency-plugin": "^5.2.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^6.3.0",
    "css-minimizer-webpack-plugin": "^3.0.2",
    "eslint": "^6.6.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-node": "^10.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.16.0",
    "eslint-plugin-standard": "^4.0.1",
    "fibers": "^5.0.0",
    "fork-ts-checker-webpack-plugin": "^6.3.2",
    "html-webpack-plugin": "^5.3.2",
    "image-minimizer-webpack-plugin": "^2.2.0",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-jpegtran": "^7.0.0",
    "imagemin-optipng": "^8.0.0",
    "imagemin-pngquant": "^9.0.2",
    "imagemin-svgo": "^9.0.0",
    "less": "^3.10.3",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.2.0",
    "mockjs": "^1.1.0",
    "postcss": "^8.3.6",
    "postcss-loader": "^6.1.1",
    "puppeteer": "^4.0.1",
    "react-refresh": "^0.10.0",
    "redux-devtools-extension": "^2.13.8",
    "sass": "^1.38.1",
    "sass-loader": "^12.1.0",
    "shelljs": "^0.8.4",
    "speed-measure-webpack-plugin": "^1.5.0",
    "style-loader": "^1.0.0",
    "terser-webpack-plugin": "^3.0.0",
    "timers-browserify": "^2.0.12",
    "ts-node": "^8.10.2",
    "typescript": "^4.4.2",
    "webpack": "^5.51.1",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.0.0",
    "webpack-merge": "^5.8.0",
    "webpackbar": "^5.0.0-3",
    "yargs": "^15.3.1"
  }

webpack.config.js

module.exports = {
  entry: {
    main: './src/index.tsx'
  },
  mode: 'production',
  stats: "errors-only",
  resolve: {
    symlinks: false,
    extensions: [ '.tsx', '.ts', '.js', '.jsx' ],
    fallback: {
      'timers': require.resolve('timers-browserify')
    }
  },
  output: {
    chunkFilename: `${buildRoot}/[name]-[contenthash:8].min.js`,
    filename: `${buildRoot}/[name]-[contenthash:8].min.js`,
  },
  cache: {
    type: 'filesystem',
    name: `${projectName}_${isRelease ? 'release' : 'prod'}`,
    buildDependencies: {
      config: [ __filename ]
    },
  },
  module: {
    rules: [ {
      test: /\.[tj]sx?$/,
      exclude: /node_modules/,
      use: [
        'babel-loader?cacheDirectory',
      ]
    },
    {
      test: /\.less$/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: '../'
          }
        },
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              modifyVars: {
                styleVariables, '@primary-color': '#00d0c4'
              },
              javascriptEnabled: true
            }
          }
        }
      ]
    },
    {
      test: /\.css$/,
      include: /node_modules/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: '../'
          }
        },
        'css-loader',
        'postcss-loader',
      ]
    },
    {
      test: /\.(sa|sc)ss$/,
      exclude: /node_modules/,
      use: [
        {
          loader: MiniCssExtractPlugin.loader,
          options: {
            publicPath: '../'
          }
        },
        {
          loader: 'css-loader',
          options: {
            modules: {
              exportLocalsConvention: 'camelCase'
            },
          }
        },
        'postcss-loader',
        {
          loader: 'sass-loader',
          options: {
            sassOptions: {
              charset: false
            },
            additionalData: Object.keys(styleVariables)
              .map(k => `$${k}: ${styleVariables[ k ]};`)
              .join('\n')
          }
        }
      ]
    },
    {
      test: /\.(jpe?g|png|gif|webp|svg)$/i,
      type: 'asset',
      generator: {
        filename: `${buildRoot}/images/[name]-[contenthash:8][ext]`,
        publicPath: '../../'
      },
      parser: {
        dataUrlCondition: {
          maxSize: 5 * 1024
        }
      }
    },
    {
      test: /\.(woff|eot|ttf|otf)$/i,
      type: 'asset/resource',
      generator: {
        filename: `${buildRoot}/font/[name]-[contenthash:8][ext]`,
        publicPath: '../../'
      }
    } ]
  },
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  },
  plugins: [
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [ buildRoot ]
    }),

    new MiniCssExtractPlugin({
      filename: `${buildRoot}/css/[name]-[contenthash:8].min.css`,
      ignoreOrder: true
    }),

    new HtmlWebpackPlugin(),
  ],
  optimization: {
    runtimeChunk: 'single',
    moduleIds: 'deterministic',
    minimizer: [
      new TerserPlugin(),
      new CssMinimizerPlugin(),
      new ImageMinimizerPlugin({
        test: /\.(jpe?g|png|gif|svg)$/i,
        severityError: 'warning',
        filter: (source) => source.byteLength > 50000,
        minimizerOptions: {
          plugins: [
            [ 'jpegtran', {progressive: true} ],
            [ 'pngquant', {
              speed: 10
            } ],
            [ 'optipng', {
              optimizationLevel: 0
            } ],
            [ 'svgo' ],
          ],
        }
      })
    ]
  }
}

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:15 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
Clarkkkkcommented, Nov 8, 2021

It turns out Iā€™m use an old version of terser-webpack-pluginšŸ˜‚. Solved by updating the plugin to the latest version.

0reactions
alexander-akaitcommented, Nov 8, 2021

Will be great if you provide example

Read more comments on GitHub >

github_iconTop Results From Across the Web

Suppress "Serializing big strings impacts deserialization ...
Per the title, wondering if it is possible to suppress the "Serializing big strings impacts deserialization performance" warning messagesĀ ...
Read more >
New site design is causing problems - Ciaervo
The warning I see during the build process is: Serializing big strings (319kiB) impacts deserialization performance (consider using Buffer ...
Read more >
Another ā€œSerializing big stringsā€ warning with Webpack 5 ...
Another ā€œSerializing big stringsā€ warning with Webpack 5 filesystem cache and source maps.
Read more >
How to write custom converters for JSON serialization - .NET
In the code you write for a custom converter, be aware of the substantial performance penalty for using new JsonSerializerOptions instances.
Read more >
msgpackr - npm
Install with: npm i msgpackr. And import or require it for basic standard serialization/encoding ( pack ) and deserialization/decoding ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found