build: 优化项目结构、打包优化 (#81)

.eslintrc.cjs

@@ -18,5 +18,15 @@ module.exports = {
   },
   rules: {
     'vue/multi-word-component-names': [0],
+    'vue/require-default-prop': 0, // 不强制要求props默认值
+    'vue/require-direct-export': 1, // 要求导出组件
+    'vue/no-v-text': 1, // 禁止使用v-text
+    'vue/padding-line-between-blocks': 1, // 在vue组件中，要求在<template>、<script>、<style>之间有空行
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, // 禁止线上使用debugger
+    '@typescript-eslint/no-unused-vars': 1, // 禁止未使用的变量
+    '@typescript-eslint/no-empty-function': 1, // 禁止空函数
+    '@typescript-eslint/no-explicit-any': 0, // 允许any类型
+    'no-param-reassign': 0, // 允许修改函数参数
+    'prefer-regex-literals': 0, // 允许使用new RegExp
   },
 }

.gitignore

@@ -27,3 +27,6 @@ report.html
 *.njsproj
 *.sln
 *.sw?
+
+/src/auto-imports.d.ts
+/src/components.d.ts

.stylelintrc.cjs

@@ -31,4 +31,6 @@ module.exports = {
     // 由于使用了Element UI组件库，修改组件样式时会出现`.tj-form-item__label``这种带有下划线的类名，stylelint就会报错。这里使用正则表达式允许选择器中出现短横线和下划线。
     'selector-class-pattern': '^[a-z][a-zA-Z0-9_-]+$',
   },
+  // 配置忽略文件
+  ignoreFiles: ['node_modules/**/*', 'dist/**/*', 'public/**/*', 'doc/*'],
 }

config/plugin/compress.ts

@@ -0,0 +1,34 @@
+import type { Plugin } from 'vite'
+import compressPlugin from 'vite-plugin-compression'
+
+/**
+ * gzip压缩
+ * @param compress 压缩类型
+ * @param deleteOriginFile 是否删除原文件
+ */
+export default function configCompressPlugin(
+  compress: 'gzip' | 'brotli',
+  deleteOriginFile = false,
+): Plugin | Plugin[] {
+  const plugins: Plugin[] = []
+
+  if (compress === 'gzip') {
+    plugins.push(
+      compressPlugin({
+        ext: '.gz',
+        deleteOriginFile,
+      }),
+    )
+  }
+
+  if (compress === 'brotli') {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile,
+      }),
+    )
+  }
+  return plugins
+}

config/plugin/imagemin.ts

@@ -0,0 +1,35 @@
+import viteImagemin from 'vite-plugin-imagemin'
+
+/**
+ * 图片压缩
+ */
+export default function configImageminPlugin() {
+  const imageminPlugin = viteImagemin({
+    gifsicle: {
+      optimizationLevel: 7,
+      interlaced: false,
+    },
+    optipng: {
+      optimizationLevel: 7,
+    },
+    mozjpeg: {
+      quality: 20,
+    },
+    pngquant: {
+      quality: [0.8, 0.9],
+      speed: 4,
+    },
+    svgo: {
+      plugins: [
+        {
+          name: 'removeViewBox',
+        },
+        {
+          name: 'removeEmptyAttrs',
+          active: false,
+        },
+      ],
+    },
+  })
+  return imageminPlugin
+}

config/plugin/visualizer.ts

@@ -0,0 +1,18 @@
+import visualizer from 'rollup-plugin-visualizer'
+
+/**
+ * 打包分析
+ * @param isOpen 是否开启打包分析
+ */
+export default function configVisualizerPlugin(isOpen = false) {
+  // 自己手动开启或者定义打包分析环境变量开启打包分析
+  if (isOpen) {
+    return visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+    })
+  }
+  return []
+}

config/vite.config.base.ts

@@ -0,0 +1,50 @@
+import { resolve } from 'path'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import autoprefixer from 'autoprefixer'
+import Icons from 'unplugin-icons/vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import IconsResolver from 'unplugin-icons/resolver'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueJsx(),
+    AutoImport({
+      // 包括的文件类型
+      include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/, /\.md$/],
+      resolvers: [ElementPlusResolver(), IconsResolver({ prefix: 'Icon' })],
+      dts: 'src/auto-imports.d.ts',
+    }),
+    Components({
+      resolvers: [
+        // 自动注册图标组件
+        IconsResolver({ enabledCollections: ['ep'] }),
+        ElementPlusResolver(),
+      ],
+      dts: 'src/components.d.ts',
+    }),
+    Icons({ autoInstall: true }),
+  ],
+  resolve: {
+    alias: [
+      {
+        find: '@',
+        replacement: resolve(__dirname, '../src'),
+      },
+    ],
+  },
+  define: {
+    'process.env': {},
+  },
+  css: {
+    postcss: {
+      plugins: [
+        autoprefixer({}), // 自动添加样式兼容前缀
+      ],
+    },
+  },
+})

config/vite.config.dev.ts

@@ -0,0 +1,28 @@
+import { mergeConfig, loadEnv } from 'vite'
+import baseConfig from './vite.config.base'
+
+const lifecycle = process.env.npm_lifecycle_event
+const isHttpsLifecycle = lifecycle === 'dev:https'
+
+export default mergeConfig(
+  {
+    mode: 'development', // vite开发模式
+    server: {
+      port: 9988,
+      open: false, // 自动打开浏览器
+      fs: {
+        strict: true, // 文件读取必须是相对于根目录的绝对路径
+      },
+      https: isHttpsLifecycle, // 开启https
+      proxy: {
+        // capi 开头的请求代理到远程服务器
+        '/capi': {
+          // 地址根据环境配置读取
+          target: loadEnv('development', process.cwd()).VITE_API_PREFIX,
+          changeOrigin: true,
+        },
+      },
+    },
+  },
+  baseConfig,
+)

config/vite.config.prod.ts

@@ -0,0 +1,26 @@
+import { mergeConfig } from 'vite'
+import baseConfig from './vite.config.base'
+import configCompressPlugin from './plugin/compress'
+import configVisualizerPlugin from './plugin/visualizer'
+import configImageminPlugin from './plugin/imagemin'
+
+export default mergeConfig(
+  {
+    mode: 'production', // vite生产模式
+    // 插件的具体配置请查看对应的文件
+    plugins: [configCompressPlugin('gzip'), configVisualizerPlugin(), configImageminPlugin()],
+    build: {
+      rollupOptions: {
+        output: {
+          // 分包策略优化
+          manualChunks: {
+            vue: ['vue', 'vue-router', 'pinia', '@vueuse/core'],
+            xgplayer: ['xgplayer'],
+          },
+        },
+      },
+      chunkSizeWarningLimit: 2000,
+    },
+  },
+  baseConfig,
+)

package.json

@@ -7,12 +7,12 @@
     "pnpm": ">=8.4"
   },
   "scripts": {
-    "dev": "vite --host",
+    "dev": "vite --config ./config/vite.config.dev.ts --host",
     "dev:https": "vite --host",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
     "report": "rimraf dist && vite build",
-    "build-only": "rimraf dist && vite build",
+    "build-only": "rimraf dist && vite build --config ./config/vite.config.prod.ts",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "link:format": "prettier --write src/",
@@ -57,7 +57,7 @@
     "postcss-scss": "^4.0.6",
     "prettier": "^2.8.8",
     "rimraf": "^5.0.1",
-    "rollup-plugin-bundle-analyzer": "^1.6.6",
+    "rollup-plugin-visualizer": "^5.9.2",
     "sass": "^1.63.2",
     "stylelint": "^15.7.0",
     "stylelint-config-recess-order": "^4.2.0",
@@ -70,8 +70,16 @@
     "unplugin-icons": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
     "vite": "4.3.5",
-    "vite-plugin-mkcert": "^1.16.0",
+    "vite-plugin-compression": "^0.5.1",
     "vue-tsc": "^1.6.5",
     "xgplayer": "^2.31.2"
-  }
+  },
+  "browserslist": [
+    "defaults",
+    "not ie < 11",
+    "last 2 versions",
+    "> 0.3% in CN",
+    "last 3 iOS versions",
+    "not dead"
+  ]
 }