🔧工具(deps): build framework

vite.config.mts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import * as path from 'path'
-import legacyPlugin from '@vitejs/plugin-legacy'
+import legacy from '@vitejs/plugin-legacy'
 
 // 自动导入vue中hook reactive ref等
 import AutoImport from 'unplugin-auto-import/vite'
@@ -15,61 +15,153 @@ import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
 
 import autoprefixer from 'autoprefixer'
 
-import legacy from '@vitejs/plugin-legacy'
 
-export default defineConfig({
-	resolve: {
-		//设置别名
-		alias: {
-			'@': path.resolve(__dirname, 'src')
-		}
-	},
-	css: {
-		postcss: {
-			plugins: [
-				autoprefixer({
-					overrideBrowserslist: ['Chrome > 40', 'ff > 31', 'ie 11']
-				})
-			]
-		}
-	},
-	plugins: [
-		vue(),
-		// 修改 svg 相关配置
-		createSvgIconsPlugin({
-			// 指定需要缓存的图标文件夹
-			iconDirs: [path.resolve(__dirname, './src/assets/svg')]
-		}),
-		legacy({
-			targets: ['cover 99.5%']
-		}),
-		legacyPlugin({
-			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: {
-			'/dev-api': {
-				//target是代理的目标路径
-				target: '',
-				changeOrigin: true, //必须要开启跨域
-				rewrite: (path) => path.replace(/\/dev-api/, '') // 路径重写
+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()
+				}
 			}
 		}
 	}
+
 })