feat: added brotli|gzip compression and related test commands

.env.production

@@ -7,8 +7,10 @@ VITE_PUBLIC_PATH = /
 # Delete console
 VITE_DROP_CONSOLE = true
 
-# Whether to output gz file for packaging
-VITE_BUILD_GZIP = false
+# Whether to enable gizp or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'gzip'
 
 # Basic interface address SPA
 VITE_GLOB_API_URL=/api

CHANGELOG.zh_CN.md

@@ -4,6 +4,7 @@
 
 - useModal 新增返回值函数 `redoModalHeight`,用于在 modal 内为动态内容时刷新 modal 高度
 - 升级 husky 到 5.0
+- 新增 `brotli`|`gzip`压缩及相关测试命令
 
 ### 🐛 Bug Fixes
 

README.md

@@ -257,3 +257,4 @@ If these plugins are helpful to you, you can give a star
 - [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import)
 - [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme)
 - [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin)
+- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression)

README.zh-CN.md

@@ -260,6 +260,7 @@ yarn clean:lib # 删除node_modules，兼容window系统
 - [vite-plugin-style-import](https://github.com/anncwb/vite-plugin-style-import)
 - [vite-plugin-theme](https://github.com/anncwb/vite-plugin-theme)
 - [vite-plugin-imagemin](https://github.com/anncwb/vite-plugin-imagemin)
+- [vite-plugin-compression](https://github.com/anncwb/vite-plugin-compression)
 
 ## 加入我们
 

build/utils.ts

@@ -23,13 +23,6 @@ export function isReportMode(): boolean {
   return process.env.REPORT === 'true';
 }
 
-/**
- * Whether to generate gzip for packaging
- */
-export function isBuildGzip(): boolean {
-  return process.env.VITE_BUILD_GZIP === 'true';
-}
-
 export interface ViteEnv {
   VITE_PORT: number;
   VITE_USE_MOCK: boolean;
@@ -40,7 +33,7 @@ export interface ViteEnv {
   VITE_GLOB_APP_SHORT_NAME: string;
   VITE_USE_CDN: boolean;
   VITE_DROP_CONSOLE: boolean;
-  VITE_BUILD_GZIP: boolean;
+  VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none';
   VITE_DYNAMIC_IMPORT: boolean;
   VITE_LEGACY: boolean;
   VITE_USE_IMAGEMIN: boolean;

build/vite/plugin/compress.ts

+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ */
+import type { Plugin } from 'vite';
+
+import compressPlugin from 'vite-plugin-compression';
+
+export function configCompressPlugin(compress: 'gzip' | 'brotli' | 'none'): Plugin | Plugin[] {
+  const compressList = compress.split(',');
+
+  const plugins: Plugin[] = [];
+
+  if (compressList.includes('gzip')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.gz',
+      })
+    );
+  }
+  if (compressList.includes('brotli')) {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+      })
+    );
+  }
+  return plugins;
+}

build/vite/plugin/gzip.ts

-/**
- * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
- */
-import type { Plugin } from 'vite';
-
-import gzipPlugin from 'rollup-plugin-gzip';
-import { isBuildGzip } from '../../utils';
-
-export function configGzipPlugin(isBuild: boolean): Plugin | Plugin[] {
-  const useGzip = isBuild && isBuildGzip();
-
-  if (useGzip) {
-    return gzipPlugin();
-  }
-
-  return [];
-}

build/vite/plugin/index.ts

@@ -9,14 +9,14 @@ import { ViteEnv } from '../../utils';
 import { configHtmlPlugin } from './html';
 import { configPwaConfig } from './pwa';
 import { configMockPlugin } from './mock';
-import { configGzipPlugin } from './gzip';
+import { configCompressPlugin } from './compress';
 import { configStyleImportPlugin } from './styleImport';
 import { configVisualizerConfig } from './visualizer';
 import { configThemePlugin } from './theme';
 import { configImageminPlugin } from './imagemin';
 
 export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
-  const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY } = viteEnv;
+  const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS } = viteEnv;
 
   const vitePlugins: (Plugin | Plugin[])[] = [
     // have to
@@ -52,7 +52,7 @@ export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
     VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin());
 
     // rollup-plugin-gzip
-    vitePlugins.push(configGzipPlugin(isBuild));
+    vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS));
 
     // vite-plugin-pwa
     vitePlugins.push(configPwaConfig(viteEnv));

package.json

@@ -19,6 +19,8 @@
     "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "lint:ls-lint": "ls-lint",
     "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
+    "test:gzip": "http-server dist --cors --gzip -c-1",
+    "test:br": "http-server dist --cors --brotli -c-1",
     "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
     "postinstall": "is-ci || husky install"
   },
@@ -53,7 +55,7 @@
     "@ls-lint/ls-lint": "^1.9.2",
     "@purge-icons/generated": "^0.6.0",
     "@types/echarts": "^4.9.3",
-    "@types/fs-extra": "^9.0.6",
+    "@types/fs-extra": "^9.0.7",
     "@types/http-proxy": "^1.17.5",
     "@types/koa-static": "^4.0.1",
     "@types/lodash-es": "^4.17.4",
@@ -66,9 +68,9 @@
     "@types/zxcvbn": "^4.4.0",
     "@typescript-eslint/eslint-plugin": "^4.15.0",
     "@typescript-eslint/parser": "^4.15.0",
-    "@vitejs/plugin-legacy": "^1.2.3",
+    "@vitejs/plugin-legacy": "^1.3.0",
     "@vitejs/plugin-vue": "^1.1.4",
-    "@vitejs/plugin-vue-jsx": "^1.0.3",
+    "@vitejs/plugin-vue-jsx": "^1.1.0",
     "@vue/compiler-sfc": "^3.0.5",
     "@vuedx/typecheck": "^0.6.3",
     "@vuedx/typescript-plugin-vue": "^0.6.3",
@@ -83,28 +85,29 @@
     "eslint-plugin-vue": "^7.5.0",
     "esno": "^0.4.3",
     "fs-extra": "^9.1.0",
+    "http-server": "^0.12.3",
     "husky": "^5.0.9",
     "is-ci": "^2.0.0",
     "less": "^4.1.1",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
     "rimraf": "^3.0.2",
-    "rollup-plugin-gzip": "^2.5.0",
     "rollup-plugin-visualizer": "^4.2.0",
-    "stylelint": "^13.9.0",
+    "stylelint": "^13.10.0",
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
     "stylelint-order": "^4.1.0",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.3",
-    "vite": "2.0.0-beta.66",
+    "typescript": "^4.1.5",
+    "vite": "2.0.0-beta.69",
+    "vite-plugin-compression": "^0.2.1",
     "vite-plugin-html": "^2.0.0",
-    "vite-plugin-imagemin": "^0.2.5",
+    "vite-plugin-imagemin": "^0.2.6",
     "vite-plugin-mock": "^2.1.4",
     "vite-plugin-purge-icons": "^0.6.0",
     "vite-plugin-pwa": "^0.4.6",
     "vite-plugin-style-import": "^0.7.2",
-    "vite-plugin-theme": "^0.4.2",
+    "vite-plugin-theme": "^0.4.3",
     "vue-eslint-parser": "^7.4.1",
     "yargs": "^16.2.0"
   },

vite.config.ts

@@ -30,13 +30,15 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
   return {
     base: VITE_PUBLIC_PATH,
     root,
-    alias: [
-      {
-        // /@/xxxx  =>  src/xxx
-        find: /^\/@\//,
-        replacement: pathResolve('src') + '/',
-      },
-    ],
+    resolve: {
+      alias: [
+        {
+          // /@/xxxx  =>  src/xxx
+          find: /^\/@\//,
+          replacement: pathResolve('src') + '/',
+        },
+      ],
+    },
     server: {
       port: VITE_PORT,
       // Load proxy configuration from .env
@@ -88,6 +90,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     optimizeDeps: {
       // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
       include: ['@iconify/iconify'],
+      exclude: ['vue-demi'],
     },
   };
 };