feat: production mode compressed image

.env.production

@@ -20,6 +20,9 @@ VITE_GLOB_UPLOAD_URL=/upload
 # Interface prefix
 VITE_GLOB_API_URL_PREFIX=
 
+# Whether to enable image compression
+VITE_USE_IMAGEMIN= true
+
 # use pwa
 VITE_USE_PWA = false
 

CHANGELOG.zh_CN.md

@@ -4,6 +4,7 @@
 
 - `ApiSelect`新增 `numberToString`属性,用于将 value 为`number`的值全部转化为`string`
 - 新增主题色切换
+- 打包图片压缩
 
 ### ⚡ Performance Improvements
 

README.md

@@ -67,8 +67,8 @@ The documentation for 2.0 hasn't started yet, it will be provided later.
 
 ### Environmental requirements
 
-- `Node.js`: - Version>`12.0.0` is better.
-- `yarn` > `npm` > `cnpm`: - Package management tool.
+- `Node.js`: - Version > `12.0.0` .
+- `yarn` : - Package management tool.
 
 ### UI framework
 

README.zh-CN.md

@@ -68,7 +68,7 @@
 
 ### 环境要求
 
-- `Node.js`: - 版本最好大于 `12.0.0`
+- `Node.js`: - 版本大于 `12.0.0`
 - `yarn` : - 包管理工具.
 
 ### UI 框架

build/script/buildConf.ts

@@ -3,8 +3,9 @@
  */
 import { GLOB_CONFIG_FILE_NAME } from '../constant';
 import fs, { writeFileSync } from 'fs-extra';
+import chalk from 'chalk';
 
-import { errorConsole, successConsole, getCwdPath, getEnvConfig } from '../utils';
+import { getCwdPath, getEnvConfig } from '../utils';
 import { getShortName } from '../getShortName';
 
 function createConfig(
@@ -29,9 +30,10 @@ function createConfig(
     fs.mkdirp(getCwdPath(outDir));
     writeFileSync(getCwdPath(`${outDir}/${configFileName}`), configStr);
 
-    successConsole('The configuration file is build successfully！');
+    console.log(chalk.cyan('✨ configuration file is build successfully:'));
+    console.log(chalk.gray(outDir + '/' + chalk.green(configFileName)) + '\n');
   } catch (error) {
-    errorConsole('Configuration file configuration file failed to package\n' + error);
+    console.log(chalk.red('configuration file configuration file failed to package:\n' + error));
   }
 }
 

build/script/postBuild.ts

@@ -2,7 +2,7 @@
 
 import { argv } from 'yargs';
 import { runBuildConfig } from './buildConf';
-import { errorConsole, successConsole } from '../utils';
+import chalk from 'chalk';
 
 export const runBuild = async () => {
   try {
@@ -12,9 +12,9 @@ export const runBuild = async () => {
     if (!argvList.includes('no-conf')) {
       await runBuildConfig();
     }
-    successConsole('Vite Build successfully!');
+    console.log(chalk.green.bold('✨ vite build successfully!\n'));
   } catch (error) {
-    errorConsole('Vite Build Error\n' + error);
+    console.log(chalk.red('vite build error:\n' + error));
     process.exit(1);
   }
 };

build/utils.ts

 import fs from 'fs';
 import path from 'path';
 import dotenv from 'dotenv';
-import chalk from 'chalk';
 
 export const isFunction = (arg: unknown): arg is (...args: any[]) => any =>
   typeof arg === 'function';
@@ -44,6 +43,7 @@ export interface ViteEnv {
   VITE_BUILD_GZIP: boolean;
   VITE_DYNAMIC_IMPORT: boolean;
   VITE_LEGACY: boolean;
+  VITE_USE_IMAGEMIN: boolean;
 }
 
 // Read all environment variable configuration files to process.env
@@ -90,38 +90,6 @@ export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.pr
   return envConfig;
 }
 
-function consoleFn(color: string, message: any) {
-  console.log(
-    chalk.blue.bold('****************  ') +
-      (chalk as any)[color].bold(message) +
-      chalk.blue.bold('  ****************')
-  );
-}
-
-/**
- * warnConsole
- * @param message
- */
-export function successConsole(message: any) {
-  consoleFn('green', '✨ ' + message);
-}
-
-/**
- * warnConsole
- * @param message
- */
-export function errorConsole(message: any) {
-  consoleFn('red', '✨ ' + message);
-}
-
-/**
- * warnConsole
- * @param message message
- */
-export function warnConsole(message: any) {
-  consoleFn('yellow', '✨ ' + message);
-}
-
 /**
  * Get user root directory
  * @param dir file path

build/vite/plugin/imagemin.ts

+import viteImagemin from 'vite-plugin-imagemin';
+
+export function configImageminPlugin() {
+  const plugin = viteImagemin({
+    gifsicle: {
+      optimizationLevel: 7,
+      interlaced: false,
+    },
+    optipng: {
+      optimizationLevel: 7,
+    },
+    webp: {
+      quality: 75,
+    },
+    mozjpeg: {
+      quality: 65,
+    },
+    pngquant: {
+      quality: [0.65, 0.9],
+      speed: 4,
+    },
+    svgo: {
+      plugins: [
+        {
+          removeViewBox: false,
+        },
+        {
+          removeEmptyAttrs: false,
+        },
+      ],
+    },
+  });
+  return plugin;
+}

build/vite/plugin/index.ts

@@ -12,6 +12,7 @@ import { configGzipPlugin } from './gzip';
 import { configStyleImportPlugin } from './styleImport';
 import { configVisualizerConfig } from './visualizer';
 import { configThemePlugin } from './theme';
+import { configImageminPlugin } from './imagemin';
 
 // gen vite plugins
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
@@ -20,9 +21,6 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   // vite-plugin-html
   vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
 
-  // vite-plugin-pwa
-  vitePlugins.push(configPwaConfig(viteEnv, isBuild));
-
   // vite-plugin-mock
   vitePlugins.push(configMockPlugin(viteEnv, isBuild));
 
@@ -32,14 +30,22 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
   // vite-plugin-style-import
   vitePlugins.push(configStyleImportPlugin());
 
-  // rollup-plugin-gzip
-  vitePlugins.push(configGzipPlugin(isBuild));
-
   // rollup-plugin-visualizer
   vitePlugins.push(configVisualizerConfig());
 
   //vite-plugin-theme
   vitePlugins.push(configThemePlugin());
 
+  if (isBuild) {
+    //vite-plugin-imagemin
+    viteEnv.VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin());
+
+    // rollup-plugin-gzip
+    vitePlugins.push(configGzipPlugin(isBuild));
+
+    // vite-plugin-pwa
+    vitePlugins.push(configPwaConfig(viteEnv));
+  }
+
   return vitePlugins;
 }

build/vite/plugin/pwa.ts

@@ -2,10 +2,10 @@ import { VitePWA } from 'vite-plugin-pwa';
 
 import { ViteEnv } from '../../utils';
 
-export function configPwaConfig(env: ViteEnv, isBulid: boolean) {
+export function configPwaConfig(env: ViteEnv) {
   const { VITE_USE_PWA, VITE_GLOB_APP_TITLE, VITE_GLOB_APP_SHORT_NAME } = env;
 
-  if (VITE_USE_PWA && isBulid) {
+  if (VITE_USE_PWA) {
     // vite-plugin-pwa
     const pwaPlugin = VitePWA({
       manifest: {

package.json

@@ -5,7 +5,7 @@
     "bootstrap": "yarn install",
     "serve": "vite",
     "dev": "vite",
-    "build": "cross-env NODE_ENV=production  vite build && esno ./build/script/postBuild.ts",
+    "build": "vite build && esno ./build/script/postBuild.ts",
     "build:no-cache": "yarn clean:cache && npm run build",
     "report": "cross-env REPORT=true npm run build ",
     "preview": "npm run build && vite preview",
@@ -95,6 +95,7 @@
     "typescript": "^4.1.3",
     "vite": "2.0.0-beta.64",
     "vite-plugin-html": "^2.0.0",
+    "vite-plugin-imagemin": "^0.2.0",
     "vite-plugin-mock": "^2.0.1",
     "vite-plugin-purge-icons": "^0.6.0",
     "vite-plugin-pwa": "^0.4.2",
@@ -103,6 +104,10 @@
     "vue-eslint-parser": "^7.4.1",
     "yargs": "^16.2.0"
   },
+  "resolutions": {
+    "//": "Used to install imagemin dependencies, because imagemin may not be installed in China.If it is abroad, you can delete it",
+    "bin-wrapper": "npm:bin-wrapper-china"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/anncwb/vue-vben-admin.git"