Em comparação com o pacote webpack, webpack-bundle-analyzeros plug-ins são usados para analisar o tamanho do pacote. No pacote vite, como o vite realmente usa pacote rollup, este artigo apresentará como acessar rollup-plugin-visualizerplug-ins no projeto.
1. Instale o plug-in
npm install rollup-plugin-visualizer --save-dev
Após a conclusão da instalação, package.jsonvocê verá a versão correspondente em , como segue:
2. Insira o plug-in em vite.confg.ts e use-o
// 引入
import {
visualizer } from 'rollup-plugin-visualizer';
// 使用
plugins: [visualizer()],
Como mostrado abaixo:
3. Veja os resultados
Após executar npm run buildo comando, o projeto irá gerar um stats.htmlarquivo, abra este arquivo no navegador e você poderá ver o tamanho do pacote de cada módulo do projeto, conforme mostrado abaixo: É
muito simples e pronto agora ~