vite配置-打包配置 - vite - 前端 - 技术设计

# 1. 分包

修改 vite.config.ts

	build: {
	rollupOptions: {
	output: {
	manualChunks: {
	vue: ['vue', 'pinia', 'vue-router'],
	elementIcons: ['@element-plus/icons-vue'],
	},
	},
	},
	}

# 2. 生成.gz 文件

# 1. 安装

yarn add vite-plugin-compression -D

# 2. 修改 vite.config.ts

默认情况下插件在开发 (serve) 和生产 (build) 模式中都会调用

使用 apply 属性指明它们仅在 build 或 serve 模式时调用

这里打包生成 .gz 插件仅需在打包时使用

	import viteCompression from 'vite-plugin-compression'

	plugins: [
	//...
	{
	...viteCompression(),
	apply: 'build',
	},
	],

# 3. js 和 css 文件夹分离

	export default defineConfig({
	build: {
	rollupOptions: {
	output: {
	chunkFileNames: "static/js/[name]-[hash].js",
	entryFileNames: "static/js/[name]-[hash].js",
	assetFileNames: "static/[ext]/[name]-[hash].[ext]",
	},
	},
	},
	});

# 4. 分析生成包的大小

# 1. 安装

rollup-plugin-visualizer

# 2. 修改 `vite.config.ts`

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

	plugins: [
	//...
	visualizer({ open: true }),
	]

# 1. 分包

# 2. 生成.gz 文件