vanilla-extract-css/vanilla-extract

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

Open

#374 ouverte le 20 sept. 2021

Voir sur GitHub
 (65 commentaires) (48 réactions) (0 assignés)TypeScript (231 forks)batch import
help wantedwebpack

Métriques du dépôt

Stars
 (8 658 stars)
Métriques de merge PR
 (Merge moyen 9j 22h) (13 PRs mergées en 30 j)

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

Guide contributeur

Direction de recherche
Examinez l'avertissement de sérialisation du cache webpack. Identifiez où les grandes chaînes (par exemple, CSS généré) sont stockées sous forme de chaînes plutôt que de Buffer. Examinez l'intégration de vanilla extract avec webpack et comment il sérialise les sprinkles ou les sorties de recettes. Envisagez d'utiliser Buffer ou des méthodes de sérialisation alternatives pour améliorer les performances.
Stack technique
typescriptnodejs
Domaine
frontend
Type d'issue
Bug
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
3
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
Une demi journée
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Active
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
JavaScriptTypeScriptwebpack basics
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
40