Compared with webpack packaging, webpack-bundle-analyzerplug-ins are used to analyze the packaging size. In vite packaging, since vite actually uses rollup packaging, this article will introduce how to access rollup-plugin-visualizerplug-ins in the project.
1. Install the plug-in
npm install rollup-plugin-visualizer --save-dev
After the installation is complete, package.jsonyou will see the corresponding version in , as follows:
2. Introduce the plug-in into vite.confg.ts and use it
// 引入
import {
visualizer } from 'rollup-plugin-visualizer';
// 使用
plugins: [visualizer()],
As shown below:
3. View the results
After executing npm run buildthe command, the project will generate a stats.htmlfile. Open this file in the browser, and you can see the packaging size of each module of the project, as shown below: It is
very simple, and you are done now~