vanilla-extract-css/vanilla-extract

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

Open

#374 aberto em 20 de set. de 2021

Ver no 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

Guia do colaborador

Pilha de tecnologia
typescriptnodejsnextjscss
Domain
performance
Tipo Issue
bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-2 days
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
active
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
clear
Prerequisites
Familiarity with vanilla extractUnderstanding of webpack cachingNode.js experienceBasic knowledge of CSS in JS
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
35
Direção de pesquisa
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.