Maison > interface Web > js tutoriel > utilisation de rollup-plugin-analyzer dans les scripts trpc

utilisation de rollup-plugin-analyzer dans les scripts trpc

Barbara Streisand
Libérer: 2024-10-26 15:34:30
original
357 Les gens l'ont consulté

Dans l'article précédent, nous avons fourni une image mentale des fonctions dans le fichier analyseSizeChange.ts. Dans cet article, découvrons comment le changement de taille réel est analysé.

import analyze from 'rollup-plugin-analyzer';
export default function analyzeSizeChange(packageDir: string) {
 let analyzePluginIterations = 0;
 return analyze({
   summaryOnly: process.env.CI ? undefined : true,
   skipFormatted: process.env.CI ? true : undefined,
   onAnalysis: (analysis) => {
   },
 });
}
Copier après la connexion

l'analyse est importée depuis rollup-plugin-analyzer. Il a un objet comme paramètre avec des options :

  1. summaryOnly — Uniquement le résumé du bundle de sortie et les graphiques à barres d'utilisation du module

  2. skipFormatted — Ne pas afficher de chaîne formatée

  3. onAnalysis — Rappel à invoquer avec l'objet d'analyse (j'ai copié la description ci-dessous pour onAnalysis depuis npm :)

la fonction sera invoquée avec :

- analyseObject (Objet)

- bundleSize (Number) — taille du bundle rendu en octets

- bundleOrigSize (Number) — taille du bundle d'origine en octets

- bundleReduction (Number) — pourcentage de réduction de la taille du bundle rendu

- moduleCount (Number) — Nombre de tous les modules inclus

- modules (Array) — tableau d'objets d'analyse de modules

- module (Objet)

- id (String) — chemin du module / identifiant du module rollup

- size (Number) — taille du code du module rendu en octets

- origSize (Number) — taille du code original du module en octets

- Dépendants (Array) — liste des identifiants/chemins de modules dépendants

- pourcentage (Nombre) — pourcentage de la taille du module par rapport à l'ensemble de l'ensemble

- réduction (Nombre) — pourcentage de réduction de la taille rendue

- renderExports (Array) — liste des exportations nommées utilisées

- suppriméExports (Array) — liste des exportations nommées inutilisées

Voyons combien de ces options sont réellement utilisées dans le fichier analyseSizeChange.

- bundleSize

-modules

C'est justement ceux-ci qui sont utilisés dans analyseSizeChange.ts

Mais dans quelles circonstances ce script est-il exécuté ? est-ce après avoir enregistré du code ? fait-il rapport sur une pull request ? Pour le savoir, nous devons aller là où le code nous mène.

Vous devez d'abord rechercher analyserSizeChange pour voir où il est utilisé. Il s'avère être utilisé dans script/getRollupConfig.ts

rollup-plugin-analyzer usage in trpc scripts

Ensuite, vous devrez découvrir où getRollupConfig est utilisé. Il est utilisé dans de nombreux packages.

rollup-plugin-analyzer usage in trpc scripts

mais j'ai choisi packages/client/rollup.config.ts, cette configuration de cumul est utilisée dans le script de build.

"scripts": {
 "build": "rollup - config rollup.config.ts - configPlugin rollup-plugin-swc3",
Copier après la connexion

Donc, la réponse est que la taille du bundle changera lorsque vous créerez un package dans le code source du tRPC.

À propos de nous :

Chez Thinkthroo, nous étudions les grands projets open source et fournissons des guides architecturaux. Nous avons développé des composants resubale, construits avec le vent arrière, que vous pouvez utiliser dans votre projet. Nous proposons des services de développement Next.js, React et Node.

Prenez rendez-vous avec nous pour discuter de votre projet.

rollup-plugin-analyzer usage in trpc scripts

rollup-plugin-analyzer usage in trpc scripts

Références :

  1. https://github.com/trpc/trpc/blob/next/scripts/analyzeSizeChange.ts

  2. https://github.com/search?q=repo:trpc/trpc getRollupConfig&type=code

  3. https://github.com/trpc/trpc/blob/3388c9691d122b9d4047b2de0caedcdf611354ab/packages/client/rollup.config.ts#L3

  4. https://github.com/trpc/trpc/blob/3388c9691d122b9d4047b2de0caedcdf611354ab/scripts/getRollupConfig.ts#L9

  5. https://www.npmjs.com/package/rollup-plugin-analyzer#options



Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal