Envoyer les styles de MUI avec le balisage qui en a besoin

Fixkamo-internal
Expédié
2 septembre 2026 à 09:08 UTC
Auteur
kamo
Commite
d473a2c

interne.kamocrm.com desservait un document de 1,34 MB contenant 123 .css-xxxx noms de classe - "MuiBox-root css-e26q24" parmi lesquels - et aucune règle pour l'un d'entre eux eux. Un navigateur peint exactement comme donné, et ce qu'il donne, c'est le rapport flash: la nav's "Loading..." en un seul style 'h6' coincé dans le coin supérieur gauche, et les huit éléments «MuiSvgIcon» à côté de lui à 300x150 pièce, qui étant la taille d'un élément remplacé prend quand rien ne le taille et les icônes MUI ne portent aucun attribut de largeur ou de hauteur. Puis l'hydratation s'est déroulée, l'émotion a inséré toutes les le côté client, et la page s'est enclée. Le shell est dans le HTML depuis que le serveur est authentifié (sssr) et cela vaut la peine d'être conservé, c'est la différence entre un document avec 16 Ko de vrai DOM dans celui-ci et un avec presque aucun. Ce qu'il a également fait a été de faire l'application ne dépend de rien ici n'affirme: que la classe nomme l'émotion écrit dans ce balisage qui arrive avec leurs règles. L'émotion décide que par rendu, à partir de sa propre lecture de l'environnement, et il n'y a aucun moyen de voir de l'intérieur de l'application, qu'il soit correct. Rien ne jette, rien n'est bûcher, non un test qui rend un élément avis, et la page est correcte quelques centaines millisecondes plus tard. Une reconstruction a depuis produit une image qui les émet, qui est l'autre moitié du problème: le comportement n'est pas à nous de le faire. Donc, c'est dit au lieu de supposé. EmotionRegistry rend l'arbre à travers un cache en mode compat, collecte ce que ce cache insère, et l'émet à travers "useServerInsertedHTML", qui ne pose rien à propos de l'environnement. Mesurée contre la vraie application: un 'style' dans "head", 48,5 ko, définissant l'ensemble des 58 classe les utilisations du balisage servie, à la place de 71 étiquettes éparpillées dans le corps de l'avance sur le balisage plutôt que de l'entrelacer. Clé, qui est la fonctionnalité par défaut de l'émotion, donc aucun nom de classe n'a changé; c'est également la clé que le navigateur «createCache» recherche lorsqu'il adopte un Élément de type «syrne» (symne de données-émotion), ce qui empêche le client insérer la totalité des 58 par seconde. Non prévoyé: l'ordre ne décide rien ici en dans l'une ou l'autre direction, puisque le thème CSS contient: Non, le sélecteur .Mui, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, le sélecteur, «émotion/cache» était déjà dans l'arbre en tant que dépendance de l'émotion/réagir; qui le déclare, à la version déjà résolue, donc l'entrée du fichier de verrouillage ne pas bouger et 'npm ci' installe exactement ce qu'il a installé avant. Gardien, parce que l'échec est invisible pour tout le reste dans le dépôt. vérification-emotion-ssr échoue si le registre est supprimé ou si un fournisseur est hissé au-dessus de lui - qui prendrait tranquillement les styles de ce sous-arbre de la Il a été confirmé que les deux défaillances étaient attrapées avant que le garde ne soit câblé en test de npm. Vérifié: la feuille de style émise couvre chaque classe du balisage desservi, avec - parmi eux; les 13 autres gardes passent; tsc ne rapporte rien de nouveau; le vitest est aux mêmes 30 échecs préexistants que origine/principal se trouve sur cette machine (ensembles de kiof/-----------------------------

Tous les changements

Comme ce que tu vois expédier ?

Chacune de ces mises à jour atterrit automatiquement dans votre espace de travail. Commencez gratuitement et regardez-le grandir semaine après semaine.

Commencez gratuitement pour toujoursPrix de visualisation