项目大小面板

可以让你看到哪些模块的体积大小，无论是压缩前还是压缩后，都可以很直观的看到

安装命令：

npm install --save-dev webpack-bundle-analyzer
or
yarn add -D webpack-bundle-analyzer

npm install --save-dev webpack-bundle-analyzer
or
yarn add -D webpack-bundle-analyzer

配置文件：vue.config.js

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = defineConfig({
configureWebpack: {
    	plugins: [new BundleAnalyzerPlugin()], 
	}
})

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = defineConfig({
configureWebpack: {
    	plugins: [new BundleAnalyzerPlugin()], 
	}
})

执行npm run build后，会自动打开面板的

效果图：

vue3版vite

vite使用（rollup-plugin-visualizer）

安装命令

npm i rollup-plugin-visualizer -D

npm i rollup-plugin-visualizer -D

引入

import { visualizer } from 'rollup-plugin-visualizer'

import { visualizer } from 'rollup-plugin-visualizer'

配置

plugins: [ visualizer({open: true}) ]

plugins: [ visualizer({open: true}) ]

项目大小面板 ​

vue3版vite ​

项目大小面板

vue3版vite