[webpack.cache.PackFileCacheStrategy] Serializing big strings (110kiB) impacts deserialization performance

[moroshko]

Describe the bug

Strangely enough, adding more sprinkles (see this commit) causing the following warning to appear in Node's console:

<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (110kiB) impacts deserialization 
performance (consider using Buffer instead and decode when needed)

Link to reproduction

1. git clone https://github.com/moroshko/webpack-cache-issue.git
2. cd webpack-cache-issue
3. yarn
4. yarn dev
5. Observe the warning

Note: You might need to rm -rf .next to see the warning.

System Info

  System:
    OS: macOS 11.5.2
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 558.97 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.6/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Firefox: 92.0
    Safari: 14.1.2
  npmPackages:
    @vanilla-extract/babel-plugin: 1.1.0 => 1.1.0 
    @vanilla-extract/css: 1.6.0 => 1.6.0 
    @vanilla-extract/next-plugin: 1.0.0 => 1.0.0 
    @vanilla-extract/recipes: 0.1.0 => 0.1.0 
    @vanilla-extract/sprinkles: 1.3.0 => 1.3.0 

[relaxedknight]

Experiencing this issue with nextjs12

[alcaroff]

Same here :(

[j-hit]

Any updates here? I'm also having this issue with Next.js 14.1.1

[alcaroff]

I added identifiers: 'short' In my next.config.js :

const withVanillaExtract = createVanillaExtractPlugin({
  identifiers: 'short',
});

it reduces the classnames string length and help to drastically reduce the build time (and serialized string size) Also, I noticed that removing conditions in sprinkles can help too

[KingJune28]

same in next v14

After some investigation, I have found that it is not related to vanilla extract at my side. Instead it is related to Mantine by adding the following to my next.config.mjs fixed my problem.

  experimental: {
    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
  }, 

this worked for me also

[0xFFrancesco]

experimental: { optimizePackageImports: ['@mantine/core', '@mantine/hooks'], },

Thanks! This precisely fixed the same issue on my side! (NextJS + Mantine)

[Felistus]

same in next v14

After some investigation, I have found that it is not related to vanilla extract at my side. Instead it is related to Mantine by adding the following to my next.config.mjs fixed my problem.

  experimental: {
    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
  }, 

this worked for me also

Thank you so much. Fixed my issue

[3li7u]

same in next v14

After some investigation, I have found that it is not related to vanilla extract at my side. Instead it is related to Mantine by adding the following to my next.config.mjs fixed my problem.

  experimental: {
    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
  }, 

I have the same issue but I'm not using Mantine UI, how can I detect which package is causing this warning?

[prescarlton]

same in next v14

After some investigation, I have found that it is not related to vanilla extract at my side. Instead it is related to Mantine by adding the following to my next.config.mjs fixed my problem.

  experimental: {
    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
  }, 

This fixed it for me. Thanks!

[marlonfrade]

Having this issue here, anyone with some help ?

[askoufis]

Having this issue here, anyone with some help ?

@marlonfrade

These warnings are a symptom, rather than a problem. Their presence might suggest you're generating a lot of CSS at build time, so perhaps it's worth re-evaluating that in your application/codebase.

Are you actually experience poor local/build performance? If so, there are various workarounds for certain situations mentioned above. If not, then I'd avoid trying to optimize anything until you actually need to.

[Jahid0178]

same in next v14

After some investigation, I have found that it is not related to vanilla extract at my side. Instead it is related to Mantine by adding the following to my next.config.mjs fixed my problem.

  experimental: {
    optimizePackageImports: ['@mantine/core', '@mantine/hooks'],
  }, 

It's work for me. Thanks buddy

[tapz]

experimental: { optimizePackageImports: ['@mantine/core', '@mantine/hooks'], },

Did not help.