Par rapport à l'empaquetage webpack, webpack-bundle-analyzerles plug-ins sont utilisés pour analyser la taille de l'emballage. Dans l'empaquetage vite, puisque vite utilise en fait l'empaquetage rollup, cet article présentera comment accéder aux rollup-plugin-visualizerplug-ins dans le projet.
1. Installez le plug-in
npm install rollup-plugin-visualizer --save-dev
Une fois l'installation terminée, package.jsonvous verrez la version correspondante dans , comme suit :
2. Introduisez le plug-in dans vite.confg.ts et utilisez-le
// 引入
import {
visualizer } from 'rollup-plugin-visualizer';
// 使用
plugins: [visualizer()],
Comme indiqué ci-dessous:
3. Consultez les résultats
Après avoir exécuté npm run buildla commande, le projet générera un stats.htmlfichier. Ouvrez ce fichier dans le navigateur et vous pourrez voir la taille de l'emballage de chaque module du projet, comme indiqué ci-dessous : C'est
très simple, et vous avez terminé maintenant~