feat: 引入图片压缩和包体积报告模式、更新依赖

config/constant.ts

@@ -0,0 +1 @@
+export const IsReport = process.env.REPORT;

config/vite/plugins/component.ts

@@ -3,7 +3,7 @@
  * @description 按需加载，自动引入组件
  */
 import Components from 'unplugin-vue-components/vite';
-import { ElementPlusResolver, VueUseComponentsResolver } from 'unplugin-vue-components/resolvers';
+import { VueUseComponentsResolver } from 'unplugin-vue-components/resolvers';
 export const AutoRegistryComponents = () => {
   return Components({
     // dirs: ['src/components'],
@@ -15,6 +15,6 @@ export const AutoRegistryComponents = () => {
     directives: true,
     include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
     exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
-    resolvers: [ElementPlusResolver(), VueUseComponentsResolver()],
+    resolvers: [VueUseComponentsResolver()],
   });
 };

config/vite/plugins/compress.ts

@@ -6,9 +6,12 @@ import viteCompression from 'vite-plugin-compression';
 
 export const ConfigCompressPlugin = () => {
   return viteCompression({
-    ext: '.gz',
+    verbose: true, // 默认即可
-    verbose: true,
+    disable: false, //开启压缩(不禁用)，默认即可
-    deleteOriginFile: false,
+    deleteOriginFile: false, //删除源文件
+    threshold: 10240, //压缩前最小文件大小
+    algorithm: 'gzip', //压缩算法
+    ext: '.gz', //文件类型
   });
 
   return [];

config/vite/plugins/imagemin.ts

@@ -0,0 +1,32 @@
+import viteImagemin from 'vite-plugin-imagemin';
+
+export function ConfigImageminPlugin() {
+  const plugin = viteImagemin({
+    gifsicle: {
+      optimizationLevel: 7,
+      interlaced: false,
+    },
+    mozjpeg: {
+      quality: 20,
+    },
+    optipng: {
+      optimizationLevel: 7,
+    },
+    pngquant: {
+      quality: [0.8, 0.9],
+      speed: 4,
+    },
+    svgo: {
+      plugins: [
+        {
+          name: 'removeViewBox',
+        },
+        {
+          name: 'removeEmptyAttrs',
+          active: false,
+        },
+      ],
+    },
+  });
+  return plugin;
+}

config/vite/plugins/index.ts

@@ -16,6 +16,8 @@ import { ConfigRestartPlugin } from './restart';
 import { ConfigProgressPlugin } from './progress';
 import { ConfigEruda } from './eruda';
 import { ConfigStyleImport } from './styleImport';
+import { ConfigImageminPlugin } from './imagemin';
+import { ConfigVisualizerConfig } from './visualizer';
 
 export function createVitePlugins(isBuild: boolean) {
   const vitePlugins: (Plugin | Plugin[])[] = [
@@ -25,31 +27,43 @@ export function createVitePlugins(isBuild: boolean) {
     vueJsx(),
     // setup语法糖组件名支持
     vueSetupExtend(),
-    // 自动按需引入组件
-    AutoRegistryComponents(),
-    // 自动按需引入依赖
-    AutoImportDeps(),
-    // 自动生成路由
-    ConfigPagesPlugin(),
-    // 开启.gz压缩  rollup-plugin-gzip
-    ConfigCompressPlugin(),
-    // 监听配置文件改动重启
-    ConfigRestartPlugin(),
-    // 构建时显示进度条
-    ConfigProgressPlugin(),
   ];
 
+  // 自动按需引入组件
+  vitePlugins.push(AutoRegistryComponents());
+
+  // 自动按需引入依赖
+  vitePlugins.push(AutoImportDeps());
+
+  // 自动生成路由
+  vitePlugins.push(ConfigPagesPlugin());
+
+  // 开启.gz压缩  rollup-plugin-gzip
+  vitePlugins.push(ConfigCompressPlugin());
+
+  // 监听配置文件改动重启
+  vitePlugins.push(ConfigRestartPlugin());
+
+  // 构建时显示进度条
+  vitePlugins.push(ConfigProgressPlugin());
+
   //styleImport
   vitePlugins.push(ConfigStyleImport());
 
   // eruda
   vitePlugins.push(ConfigEruda());
 
-  // vite-plugin-svg-icons
+  // rollup-plugin-visualizer
-  vitePlugins.push(ConfigSvgIconsPlugin(isBuild));
+  vitePlugins.push(ConfigVisualizerConfig());
+  if (isBuild) {
+    // vite-plugin-imagemin
+    vitePlugins.push(ConfigImageminPlugin());
 
-  // vite-plugin-mock
+    // vite-plugin-svg-icons
-  vitePlugins.push(ConfigMockPlugin(isBuild));
+    vitePlugins.push(ConfigSvgIconsPlugin(isBuild));
 
+    // vite-plugin-mock
+    vitePlugins.push(ConfigMockPlugin(isBuild));
+  }
   return vitePlugins;
 }

config/vite/plugins/progress.ts

@@ -5,5 +5,5 @@
 
 import progress from 'vite-plugin-progress';
 export const ConfigProgressPlugin = () => {
-  return progress();
+  return progress() as Plugin;
 };

config/vite/plugins/visualizer.ts

@@ -0,0 +1,14 @@
+import visualizer from 'rollup-plugin-visualizer';
+import { IsReport } from '../../constant';
+
+export function ConfigVisualizerConfig() {
+  if (IsReport) {
+    return visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+    }) as Plugin;
+  }
+  return [];
+}

package.json

@@ -6,6 +6,7 @@
     "dev:test": "vite --mode test",
     "dev:prod": "vite --mode production",
     "build": "vue-tsc --noEmit && vite build",
+    "report": "cross-env REPORT=true npm run build",
     "preview": "vite preview",
     "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
     "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
@@ -21,24 +22,25 @@
     "axios": "0.27.2",
     "pinia": "^2.0.14",
     "universal-cookie": "^4.0.4",
-    "vant": "^3.5.0",
+    "vant": "^3.5.1",
     "vue": "^3.2.36",
     "vue-i18n": "^9.1.10",
-    "vue-router": "^4.0.15"
+    "vue-router": "^4.0.16"
   },
   "devDependencies": {
-    "@types/node": "^17.0.41",
+    "@types/node": "^17.0.42",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
+    "@typescript-eslint/eslint-plugin": "^5.28.0",
-    "@typescript-eslint/parser": "^5.27.1",
+    "@typescript-eslint/parser": "^5.28.0",
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "^1.3.10",
     "consola": "^2.15.3",
+    "cross-env": "^7.0.3",
     "eruda": "^2.4.1",
     "eslint": "^8.17.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^9.1.0",
+    "eslint-plugin-vue": "^9.1.1",
     "husky": "8.0.1",
     "lint-staged": "13.0.1",
     "mockjs": "^1.1.0",
@@ -46,34 +48,41 @@
     "postcss-html": "1.4.1",
     "postcss-less": "^6.0.0",
     "postcss-px-to-viewport-8-plugin": "^1.1.3",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.0",
-    "stylelint": "^14.9.0",
+    "rollup-plugin-visualizer": "^5.6.0",
+    "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^8.0.0",
     "stylelint-config-recommended-vue": "^1.4.0",
     "stylelint-config-standard": "^26.0.0",
     "stylelint-order": "^5.0.0",
     "typescript": "^4.6.3",
-    "unplugin-auto-import": "^0.8.7",
+    "unplugin-auto-import": "^0.8.8",
     "unplugin-vue-components": "^0.19.6",
-    "vite": "^2.9.10",
+    "vite": "^2.9.12",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-eruda": "^1.0.1",
+    "vite-plugin-imagemin": "^0.6.1",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-pages": "^0.23.0",
+    "vite-plugin-pages": "^0.24.0",
     "vite-plugin-progress": "^0.0.2",
     "vite-plugin-restart": "^0.1.1",
     "vite-plugin-style-import": "^2.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-setup-extend": "^0.4.0",
     "vue-eslint-parser": "^9.0.2",
-    "vue-tsc": "^0.37.3"
+    "vue-tsc": "^0.37.8"
   },
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
+  "resolutions": {
+    "bin-wrapper": "npm:bin-wrapper-china",
+    "rollup": "^2.56.3",
+    "gifsicle": "5.2.0"
+  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "eslint --fix",

vite.config.ts

@@ -33,7 +33,7 @@ export default function ({ command }: ConfigEnv): UserConfigExport {
       ],
     },
     server: {
-      host: '0.0.0.0',
+      host: true,
       hmr: true,
     },
     plugins: createVitePlugins(isProduction),