[筆記] Nuxt3 bundle 結果視覺化呈現 揪出那些特別龐大的 js

章節連結

Nuxt3 在開展初期,就有 nuxi analyze 這指令來用於分析 bundle 結果的檔案大小,不過印象中一直在實驗階段。近期重新開啟新 Nuxt 專案時,發現其已經是穩定可用的狀態了。這邊筆記下原生提供和利用 vite 所提供的方法。

nuxt-js-logo


內容

原生所提供的方法很簡單,就下 nuxi analyze 即可。

當然,你也可以使用 rollup-plugin-visualize。安裝後並調整你的 nuxt.config,將 build.analyze 至少設置為 {},然後執行 build 即可


參考資料

1. rollup-plugin-visualizer
2. Nuxt3 bundle visualization A guide on how to add a Vite plugin for bundle visualization

按讚加入粉絲團

延伸閱讀