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 (231 forks)batch import
help wantedwebpack

Repository metrics

Stars
 (8,658 stars)
PR merge metrics
 (Avg merge 9d 22h) (13 merged PRs in 30d)

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

Research direction
Examine the webpack cache serialization warning. Identify where large strings (e.g., generated CSS) are stored as strings instead of Buffer. Look into vanilla extract's integration with webpack and how it serializes sprinkles or recipe outputs. Consider using Buffer or alternative serialization methods to improve performance.
Tech stack
typescriptnodejs
Domain
frontend
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.
Half day
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
JavaScriptTypeScriptwebpack basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40