chore(compress): use webpack to compress the files of the web panel (#1189)

* Turn on Gzip compression on the front end;
    - Use compression-webpack-plugin plugin;
    - Configure in vue.config.js
    - Enable compression only in production mode
* Remove original compression method

build-in-pwsh.ps1

@@ -1,29 +1,5 @@
 Write-Host $PSScriptRoot
 
-Function Compress-File([ValidateScript({Test-Path $_})][string]$File){
- 
-    $srcFile = Get-Item -Path $File
-    $newFileName = "$($srcFile.FullName).gz"
- 
-    try
-    {
-        $srcFileStream = New-Object System.IO.FileStream($srcFile.FullName,([IO.FileMode]::Open),([IO.FileAccess]::Read),([IO.FileShare]::Read))
-        $dstFileStream = New-Object System.IO.FileStream($newFileName,([IO.FileMode]::Create),([IO.FileAccess]::Write),([IO.FileShare]::None))
-        $gzip = New-Object System.IO.Compression.GZipStream($dstFileStream,[System.IO.Compression.CompressionMode]::Compress)
-        $srcFileStream.CopyTo($gzip)
-    } 
-    catch
-    {
-        Write-Host "$_.Exception.Message" -ForegroundColor Red
-    }
-    finally
-    {
-        $gzip.Dispose()
-        $srcFileStream.Dispose()
-        $dstFileStream.Dispose()
-    }
-}
-
 Function Get-build-tools(){
     if ([String]::IsNullOrEmpty($(Get-Command git -ErrorAction ignore))) {
         Write-Output "You don't install git, please install it and add it to your path."
@@ -72,13 +48,6 @@ Function Build-v2rayA(){
     #Build Web Panel
     Set-Location -Path "$CurrentPath/gui"
     yarn; yarn build
-    #Compress Web Panel's files
-    Get-ChildItem "$CurrentPath/service/server/router/web" -recurse |Where-Object{$_.PSIsContainer -eq $False}|ForEach-Object -Process{
-        if($_.Extension -ne ".png" -and $_.Extension -ne ".gz" -and $_.Name -ne "index.html"){
-            Compress-File($_.FullName)
-            Remove-Item -Path $_.FullName
-        }
-    }
     #Build v2rayA
     Set-Location -Path "$CurrentPath/service"
     go build -ldflags "-X github.com/v2rayA/v2rayA/conf.Version=$version -s -w" -o "$CurrentPath/$v2rayaBin"

build.sh

@@ -13,5 +13,4 @@ else
 fi
 # https://github.com/webpack/webpack/issues/14532#issuecomment-947012063
 cd "$CurrentDir"/gui && yarn && OUTPUT_DIR="$CurrentDir"/service/server/router/web yarn build
-find "$CurrentDir"/service/server/router/web \! -name \*.png -a \! -name \*.gz -a \! -name index.html -a ! -type d -exec gzip -9 {} +
 cd "$CurrentDir"/service && CGO_ENABLED=0 go build -ldflags "-X github.com/v2rayA/v2rayA/conf.Version=$version -s -w" -o "$CurrentDir"/v2raya

gui/package.json

@@ -43,6 +43,7 @@
     "@vue/cli-plugin-vuex": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-prettier": "^5.0.0",
+    "compression-webpack-plugin": "^10.0.0",
     "css-loader": "^5.2.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",

gui/vue.config.js

@@ -3,10 +3,29 @@ var path = require("path");
 var WebpackIconfontPluginNodejs = require("webpack-iconfont-plugin-nodejs");
 var dir = "src/assets/iconfont";
 var TerserPlugin = require("terser-webpack-plugin");
+// Compression
+const CompressionPlugin = require("compression-webpack-plugin");
+const isProd = process.env.NODE_ENV === 'production'
 
 module.exports = {
   configureWebpack: (config) => {
     config.resolve.alias["vue$"] = "vue/dist/vue.esm.js";
+    // Enable compression only in production mode
+    if (isProd) {
+      config.plugins.push(
+        new CompressionPlugin({
+          test: /.*/i,
+          exclude: [
+            /\.(png|gz)/i,
+            'index.html',
+          ],
+          deleteOriginalAssets: true,
+          algorithm: 'gzip', // 使用gzip压缩
+          compressionOptions: { level: 9 },
+          threshold: 0,
+          minRatio: Infinity,
+        }))
+    }
     return {
       optimization: {
         minimizer: [

gui/yarn.lock

@@ -2702,6 +2702,14 @@ compressible@~2.0.16:
   dependencies:
     mime-db ">= 1.43.0 < 2"
 
+compression-webpack-plugin@^10.0.0:
+  version "10.0.0"
+  resolved "https://mirrors.huaweicloud.com/repository/npm/compression-webpack-plugin/-/compression-webpack-plugin-10.0.0.tgz#3496af1b0dc792e13efc474498838dbff915c823"
+  integrity sha512-wLXLIBwpul/ALcm7Aj+69X0pYT3BYt6DdPn3qrgBIh9YejV9Bju9ShhlAsjujLyWMo6SAweFIWaUoFmXZNuNrg==
+  dependencies:
+    schema-utils "^4.0.0"
+    serialize-javascript "^6.0.0"
+
 compression@^1.7.4:
   version "1.7.4"
   resolved "https://registry.yarnpkg.com/compression/-/compression-1.7.4.tgz#95523eff170ca57c29a0ca41e6fe131f41e5bb8f"