vanilla-extract-css/vanilla-extract

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

Open

#374 opened on Sep 20, 2021

View on GitHub
 (65 comments) (48 reactions) (0 assignees)TypeScript (8,658 stars) (231 forks)batch import
help wantedwebpack

Description

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

Contributor guide

Tech stack
typescriptnodejsnextjscss
Domain
performance
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Familiarity with vanilla extractUnderstanding of webpack cachingNode.js experienceBasic knowledge of CSS in JS
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
Examine the linked reproduction repository (https://github.com/moroshko/webpack cache issue) to understand the minimal setup. Review how vanilla extract generates CSS strings, particularly in its babel plugin or next plugin. The warning suggests large strings are being serialized; consider using Buffer to reduce deserialization overhead. Look at the sprinkles package to see if its usage causes unexpectedly large CSS output.