From b7eea86efb09d12542a4f3777871433f6f5d4aec Mon Sep 17 00:00:00 2001
From: starsliao <starsliao@163.com>
Date: Sun, 11 Dec 2022 23:24:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BC=80=E5=90=AF=E5=89=8D=E7=AB=AF=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90gzip=E5=8E=8B=E7=BC=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue-consul/http-ops.conf                 |  1 +
 vue-consul/package.json                  |  1 +
 vue-consul/src/router/index.js           | 12 ++++++------
 vue-consul/src/views/dashboard/index.vue |  1 +
 vue-consul/vue.config.js                 | 11 +++++++++++
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/vue-consul/http-ops.conf b/vue-consul/http-ops.conf
index ad7b346..ba85e2f 100644
--- a/vue-consul/http-ops.conf
+++ b/vue-consul/http-ops.conf
@@ -4,6 +4,7 @@ server {
         proxy_pass      http://flask-consul:2026;
     }
     location / {
+        gzip_static on;
         root   /www/dist;
     }
 }
diff --git a/vue-consul/package.json b/vue-consul/package.json
index 1ada1ff..d9fbd8b 100644
--- a/vue-consul/package.json
+++ b/vue-consul/package.json
@@ -40,6 +40,7 @@
     "babel-jest": "28.1.2",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "chalk": "2.4.2",
+    "compression-webpack-plugin": "^6.1.1",
     "connect": "3.6.6",
     "eslint": "6.7.2",
     "eslint-plugin-vue": "6.2.2",
diff --git a/vue-consul/src/router/index.js b/vue-consul/src/router/index.js
index c03782f..c137942 100644
--- a/vue-consul/src/router/index.js
+++ b/vue-consul/src/router/index.js
@@ -183,37 +183,37 @@ export const constantRoutes = [
           }
         ]
       },
-      { 
+      {
         path: 'redis',
         name: 'REDIS',
         component: () => import('@/views/redis/index'),
         meta: { title: 'REDIS管理', icon: 'el-icon-guide' },
         children: [
-          { 
+          {
             path: 'lists',
             name: '云REDIS列表',
             component: () => import('@/views/redis/lists'),
             meta: { title: '云REDIS列表', icon: 'el-icon-cloudy' }
           },
-          { 
+          {
             path: 'self',
             name: '自建REDIS管理',
             component: () => import('@/views/redis/self'),
             meta: { title: '自建REDIS管理', icon: 'el-icon-s-platform' }
           },
-          { 
+          {
             path: 'pconfig',
             name: 'redis-pconfig',
             component: () => import('@/views/redis/pconfig'),
             meta: { title: 'Prometheus 配置', icon: 'el-icon-set-up' }
           },
-          { 
+          {
             path: 'rules',
             name: 'redis-rules',
             component: () => import('@/views/redis/rules'),
             meta: { title: '告警规则', icon: 'el-icon-bell' }
           },
-          { 
+          {
             path: 'grafana',
             name: 'redis-grafana',
             component: () => import('@/views/redis/grafana'),
diff --git a/vue-consul/src/views/dashboard/index.vue b/vue-consul/src/views/dashboard/index.vue
index fadcdb1..f44f47c 100644
--- a/vue-consul/src/views/dashboard/index.vue
+++ b/vue-consul/src/views/dashboard/index.vue
@@ -23,6 +23,7 @@
             <li>自建Mysql：从node-exporter中获取以上信息，通过instance的IP部分进行关联。</li>
             <li>云DRS：从ConsulManager-MySQL中获取，会根据实例ID进行关联。(数据来自云监控，从ConsulManager的Prometheus配置生成菜单中可生成配置。)</li>
           </ul>
+          <p><el-button type="warning" size="mini" icon="el-icon-star-off" circle />优化：开启前端资源gzip压缩！</p>
         </el-card>
       </el-timeline-item>
       <el-timeline-item timestamp="2022/11/28" placement="top">
diff --git a/vue-consul/vue.config.js b/vue-consul/vue.config.js
index f5fce6c..fe0f14f 100644
--- a/vue-consul/vue.config.js
+++ b/vue-consul/vue.config.js
@@ -15,6 +15,7 @@ const name = defaultSettings.title || 'vue Admin Template' // page title
 // port = 9528 npm run dev OR npm run dev --port = 9528
 const port = process.env.port || process.env.npm_config_port || 9528 // dev port
 
+const CompressionWebpackPlugin = require('compression-webpack-plugin')
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
   /**
@@ -50,6 +51,16 @@ module.exports = {
   configureWebpack: {
     // provide the app's title in webpack's name field, so that
     // it can be accessed in index.html to inject the correct title.
+    plugins: [
+      new CompressionWebpackPlugin({
+        algorithm: 'gzip',
+        test: /\.js$|\.html$|\.css$/,
+        filename: '[path][base].gz',
+        minRatio: 1,
+        threshold: 10240,
+        deleteOriginalAssets: false
+      })
+    ],
     name: name,
     resolve: {
       alias: {