feat: 基础搭建框架完成

vite.config.ts

@@ -1,20 +1,129 @@
-import { defineConfig } from 'vite'
+import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
-
 import { resolve } from 'path'
-
-export default defineConfig({
-    plugins: [react()],
-    resolve: {
-        alias: {
-            '@': resolve(__dirname, 'src'),
+// icons plugin
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import * as path from 'path'
+import imagemin from 'unplugin-imagemin/vite'
+import viteCompression from 'vite-plugin-compression'
+import { createHtmlPlugin } from 'vite-plugin-html'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd())
+    return {
+        plugins: [
+            react(),
+            // 修改 icons 相关配置
+            createSvgIconsPlugin({
+                // 指定需要缓存的图标文件夹
+                iconDirs: [path.resolve(__dirname, './src/assets/icons')],
+                // 指定symbolId格式
+                symbolId: 'icon-[dir]-[name]',
+            }),
+            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, // 源文件压缩后是否删除
+            }),
+            createHtmlPlugin({
+                minify: true,
+                /**
+                 * 在这里写entry后，你将不需要在`index.html`内添加 script 标签，原有标签需要删除
+                 * @default src/main.ts
+                 */
+                entry: 'src/main.tsx',
+                /**
+                 * 如果你想将 `index.html`存放在指定文件夹，可以修改它，否则不需要配置
+                 * @default index.html
+                 */
+                template: 'index.html',
+                /**
+                 * 需要注入 index.html ejs 模版的数据
+                 */
+                inject: {
+                    data: {
+                        title: env.VITE_TITLE_NAME,
+                    },
+                },
+            }),
+        ],
+        resolve: {
+            alias: {
+                '@': resolve(__dirname, 'src'),
+            },
+            extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], // 默认值，这些文件引入时不需要写后缀
         },
-    },
-    css: {
-        preprocessorOptions: {
-            less: {
-                javascriptEnabled: true,
+        css: {
+            preprocessorOptions: {
+                less: {
+                    javascriptEnabled: true,
+                },
             },
         },
-    },
+        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]', // 资源文件像 字体，图片等
+                },
+            },
+        },
+    }
 })