import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'
import legacy from '@vitejs/plugin-legacy'

// 自动导入vue中hook reactive ref等
import AutoImport from 'unplugin-auto-import/vite'
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite'
//ant-design-vue
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

// svg plugin
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

import autoprefixer from 'autoprefixer'

import viteCompression from 'vite-plugin-compression'
import imagemin from 'unplugin-imagemin/vite'

export default defineConfig(({ mode, command }) => {
	const env = loadEnv(mode, process.cwd())
	return {
		resolve: {
			//设置别名
			alias: {
				'@': path.resolve(__dirname, 'src')
			}
		},
		css: {
			postcss: {
				plugins: [
					autoprefixer({
						overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
					})
				]
			}
		},
		esbuild: {
			// configure this value when the browser version of the development environment is lower
			// minimum support es2015
			// https://esbuild.github.io/api/#target
			target: 'es2015',
			include: /\.(ts|jsx|tsx)$/
		},
		plugins: [
			vue(),
			imagemin({
				// Default mode sharp. support squoosh and sharp
				mode: 'sharp',
				beforeBundle: true,
				// Default configuration options for compressing different pictures
				compress: {
					jpg: {
						quality: 10
					},
					jpeg: {
						quality: 10
					},
					png: {
						quality: 10
					},
					webp: {
						quality: 10
					}
				},
				conversion: [
					{ from: 'jpeg', to: 'webp' },
					{ from: 'png', to: 'webp' },
					{ from: 'JPG', to: 'jpeg' }
				]
			}),
			viteCompression({
				verbose: true, // 是否在控制台中输出压缩结果
				disable: false,
				threshold: 10240, // 如果体积大于阈值，将被压缩，单位为b，体积过小时请不要压缩，以免适得其反
				algorithm: 'gzip', // 压缩算法，可选['gzip'，' brotliccompress '，'deflate '，'deflateRaw']
				ext: '.gz',
				deleteOriginFile: true // 源文件压缩后是否删除
			}),
			// 修改 svg 相关配置
			createSvgIconsPlugin({
				// 指定需要缓存的图标文件夹
				iconDirs: [path.resolve(__dirname, './src/assets/svg')]
			}),
			legacy({
				renderLegacyChunks: true,
				modernPolyfills: true,
				targets: ['chrome 52'], // 需要兼容的目标列表
				additionalLegacyPolyfills: ['regenerator-runtime/runtime'] // 面向IE11时需要此插件
			}),
			AutoImport({
				//安装两行后你会发现在组件中不用再导入ref，reactive等
				imports: ['vue', 'vue-router'],
				dts: 'auto-import.d.ts',
				//ant-design-vue
				resolvers: [AntDesignVueResolver()],
				eslintrc: {
					enabled: false // 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗

				}
			}),
			Components({
				// 指定自动导入的组件位置，默认是 src/components
				dirs: ['src/components'],
				//ant-design-vue
				resolvers: [AntDesignVueResolver({ importStyle: true, resolveIcons: true })]
			})
		],
		optimizeDeps: {
			include: ['core-js']
		},
		server: {
			proxy: {
				'/api': {
					//target是代理的目标路径
					target: env.VITE_API_BASE_URL,
					changeOrigin: true, //必须要开启跨域
					rewrite: (path) => path.replace(/\/api/, '') // 路径重写
				}
			}
		},
		build: {
			// target: ['es2015'], // 设置最终构建的浏览器兼容目标
			moduleResolution: 'node', // 决定如何处理模块。
			outDir: 'dist', // 指定输出路径
			assetsDir: 'assets', // 指定生成静态文件目录
			assetsInlineLimit: '4096', // 小于此阈值的导入或引用资源将内联为 base64 编码
			cssCodeSplit: true, // 启用 CSS 代码拆分
			// cssTarget: '', // 允许用户为 CSS 的压缩设置一个不同的浏览器 target 与 build.target 一致
			sourcemap: false, // 构建后是否生成 source map 文件

			// lib: {}, // 构建为库
			manifest: false, // 当设置为 true，构建后将会生成 manifest.json 文件
			ssrManifest: false, // 构建不生成 SSR 的 manifest 文件
			ssr: undefined, // 生成面向 SSR 的构建
			minify: 'terser', // 指定使用哪种混淆器
			// 传递给 Terser 的更多 minify 选项
			terserOptions: {
				compress: {
					drop_console: true,
					drop_debugger: true
				}
			},
			write: true, // 启用将构建后的文件写入磁盘
			emptyOutDir: true, // 构建时清空该目录
			brotliSize: true, // 启用 brotli 压缩大小报告
			chunkSizeWarningLimit: 2000, // chunk 大小警告的限制
			watch: null, // 设置为 {} 则会启用 rollup 的监听器
			rollupOptions: {  // 自定义底层的 Rollup 打包配置
				output: {
					chunkFileNames: 'js/[name]-[hash].js', // 引入文件名的名称
					entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
					assetFileNames: '[ext]/[name]-[hash].[ext]' // 资源文件像 字体，图片等
				}
			}
		},
		output: {
			// 最小化拆分包
			manualChunks(id) {
				if (id.includes('node_modules')) {
					return id.toString().split('node_modules/')[1].split('/')[0].toString()
				}
			}
		}
	}
})