refactor(vite): imagemin

shell/postinstall.sh

@@ -3,7 +3,7 @@
 # 如果中途自己删除了 'src/manifest.json' 文件，记得手动执行本文件，可以右键 `Run Code` 快速执行
 
 if test -f ./src/manifest.json; then
-  # echo ./src/manifest.json 存在
+  echo ./src/manifest.json 存在
 else
   touch ./src/manifest.json
   echo "{}" >./src/manifest.json

src/pages/demo/page/img-min/index.vue

@@ -5,15 +5,24 @@
 }
 </route>
 
-<template lang="">
+<script setup lang="ts">
+import testBgImg from './test-bg.png'
+</script>
+
+<template>
   <view class="m-4 text-center">
     <view class="mb-2 text-orange-500">
       原始图片是一个很大的，2.5M，build之后生成的图片只有1.1M，体积下降 56%
     </view>
+    <!-- #ifdef MP -->
     <image
       src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/img-min/bg-1.png"
       mode="scaleToFill"
     />
+    <!-- #endif -->
+    <!-- #ifndef MP -->
+    <image :src="testBgImg" mode="scaleToFill" />
+    <!-- #endif -->
     <view class="mb-4">对比图如下2图，如果看不清请看代码原图</view>
     <image
       src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/img-min/before.png"

vite-plugins/imagemin.ts

@@ -0,0 +1,42 @@
+// TIPS: 很多用户无法安装这个插件所以先注释掉了，如果您可以安装成功，那就可以放开这个注释，以及下面的viteImagemin配置
+// 注意，小程序有主包2M的限制，所以一般图片会放到图片服务器（不放本地），那就不需要这个插件
+import viteImagemin from 'vite-plugin-imagemin'
+
+export default (enabled: boolean) => {
+  if (!enabled) {
+    return undefined
+  }
+  return 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,
+        },
+      ],
+    },
+  })
+}

vite.config.ts

@@ -24,9 +24,7 @@ import AutoImport from 'unplugin-auto-import/vite'
 // import viteCompression from 'vite-plugin-compression'
 import ViteRestart from 'vite-plugin-restart'
 import { visualizer } from 'rollup-plugin-visualizer'
-// TIPS: 很多用户无法安装这个插件所以先注释掉了，如果您可以安装成功，那就可以放开这个注释，以及下面的viteImagemin配置
+import imagemin from './vite-plugins/imagemin'
-// 注意，小程序有主包2M的限制，所以一般图片会放到图片服务器（不放本地），那就不需要这个插件
-import viteImagemin from 'vite-plugin-imagemin'
 
 // https://vitejs.dev/config/
 export default ({ command, mode }) => {
@@ -97,40 +95,8 @@ export default ({ command, mode }) => {
           brotliSize: true,
         }),
       // 这个图片压缩插件比较耗时，希望仅在生产环境使用
-      mode === 'production' &&
+      // TODO: 缓存每次压缩过的图片，已经压缩过的不再压缩
-        viteImagemin({
+      imagemin(mode === 'production'),
-          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,
-              },
-            ],
-          },
-        }),
     ],
 
     css: {