开启前端资源gzip压缩

starsliao · Dec 11, 2022 · b7eea86 · b7eea86
1 parent 542be82
commit b7eea86
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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: {