Rumah >hujung hadapan web >tutorial js >penggunaan rollup-plugin-analyzer dalam skrip trpc
Dalam artikel sebelumnya, kami memberikan gambaran mental tentang fungsi dalam fail analyzeSizeChange.ts, Dalam artikel ini, mari ketahui cara perubahan saiz sebenar dianalisis.
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) => { }, }); }
analisis diimport daripada rollup-plugin-analyzer. Ia mempunyai objek sebagai param dengan pilihan:
summaryOnly — Hanya ringkasan bundle output dan graf bar penggunaan modul
skipFormatted — Jangan keluarkan rentetan berformat
onAnalysis — Panggilan balik untuk digunakan dengan objek analisis (saya menyalin penerangan di bawah untuk onAnalysis daripada npm:)
fungsi akan digunakan dengan:
- analysisObject (Objek)
- Saiz berkas (Nombor) — saiz berkas diberikan dalam bait
- bundleOrigSize (Nombor) — saiz bundle asal dalam bait
- bundleReduction (Nombor) — peratusan pengurangan saiz bundle yang diberikan
- moduleCount (Nombor) — Kiraan semua modul yang disertakan
- modul (Array) — susunan objek analisis modul
- modul (Objek)
- id (String) — laluan modul / id modul rollup
- saiz (Nombor) — saiz kod modul yang diberikan dalam bait
- origSize (Nombor) — saiz kod asal modul dalam bait
- tanggungan (Array) — senarai id / laluan modul bergantung
- peratus (Nombor) — peratusan saiz modul berbanding keseluruhan berkas
- pengurangan (Nombor) — peratusan pengurangan saiz yang diberikan
- renderedExports (Array) — senarai eksport bernama terpakai
- RemoveExports (Array) — senarai eksport bernama yang tidak digunakan
Mari kita lihat berapa banyak pilihan ini sebenarnya digunakan dalam fail analyzeSizeChange.
- Saiz berkas
- modul
Hanya ini didapati digunakan dalam analysisSizeChange.ts
Tetapi dalam keadaan apakah skrip ini dilaksanakan? adakah selepas anda menyemak beberapa kod? adakah ia melaporkan permintaan tarik? Untuk mengetahuinya, kita perlu pergi ke mana kod membawa kita.
Anda perlu terlebih dahulu mencari analisaSizeChange untuk melihat di mana ia digunakan. Ia didapati digunakan dalam skrip/getRollupConfig.ts
Seterusnya, anda perlu mengetahui di mana getRollupConfig digunakan. Ia digunakan dalam banyak pakej.
tetapi saya memilih packages/client/rollup.config.ts, konfigurasi rollup ini digunakan dalam skrip binaan.
"scripts": { "build": "rollup - config rollup.config.ts - configPlugin rollup-plugin-swc3",
Jadi jawapannya, anda akan mengalami perubahan saiz berkas apabila anda membina pakej dalam kod sumber tRPC.
Di Thinkthroo, kami mengkaji projek sumber terbuka yang besar dan menyediakan panduan seni bina. Kami telah membangunkan Komponen resubale, dibina dengan tailwind, yang boleh anda gunakan dalam projek anda. Kami menawarkan perkhidmatan pembangunan Next.js, React dan Node.
Tempah mesyuarat dengan kami untuk menyelesaikan projek anda.
https://github.com/trpc/trpc/blob/next/scripts/analyzeSizeChange.ts
https://github.com/search?q=repo:trpc/trpc getRollupConfig&type=code
https://github.com/trpc/trpc/blob/3388c9691d122b9d4047b2de0caedcdf611354ab/packages/client/rollup.config.ts#L3
https://github.com/trpc/trpc/blob/3388c9691d122b9d4047b2de0caedcdf611354ab/scripts/getRollupConfig.ts#L9
https://www.npmjs.com/package/rollup-plugin-analyzer#options
Atas ialah kandungan terperinci penggunaan rollup-plugin-analyzer dalam skrip trpc. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!