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 viteImagemin from 'vite-plugin-imagemin'


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(),
			viteImagemin({
				gifsicle: { // gif图片压缩
					optimizationLevel: 3, // 选择1到3之间的优化级别
					interlaced: false // 隔行扫描gif进行渐进式渲染
					// colors: 2 // 将每个输出GIF中不同颜色的数量减少到num或更少。数字必须介于2和256之间。
				},
				optipng: { // png
					optimizationLevel: 7 // 选择0到7之间的优化级别
				},
				mozjpeg: {// jpeg
					quality: 20 // 压缩质量，范围从0(最差)到100(最佳)。
				},
				pngquant: {// png
					quality: [0.8, 0.9], // Min和max是介于0(最差)到1(最佳)之间的数字，类似于JPEG。达到或超过最高质量所需的最少量的颜色。如果转换导致质量低于最低质量，图像将不会被保存。
					speed: 4 // 压缩速度，1(强力)到11(最快)
				},
				svgo: { // svg压缩
					plugins: [
						{
							name: 'removeViewBox'
						},
						{
							name: 'removeEmptyAttrs',
							active: false
						}
					]
				}
			}),
			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()]
			}),
			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()
				}
			}
		}
	}

})