前台后台-vite打包配置

1.打包体积可视化面板

npm install --save-dev rollup-plugin-visualizer

import { visualizer } from 'rollup-plugin-visualizer';
export default defineConfig({
	plugins: [
		visualizer({
				open: true, //注意这里要设置为true，否则无效
				emitFile: false, //true则打包后的分析文件会出现在打包好的文件包下，否则就会在项目目录下
				gzipSize: true,//搜集gzip压缩包的大小到图表
			}),
	]
})

2.按需自动导入

npm i unplugin-auto-import -D

 2.1 按需导入vue文件的内容

.vue文件无需再手动导入

	// import { ref, reactive, getCurrentInstance } from 'vue'
	// import { useRoute, useRouter } from 'vue-router'   // 配置自动导入，用来省略这句手动引入 
	// import { useFullscreen } from '@vue