打包性能优化

data-room-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@gcpaas/data-room-ui",
-  "version": "0.0.1-2023061908-Alpha",
+  "version": "0.0.1-2023070501-Alpha",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1529,7 +1529,7 @@
     },
     "@discoveryjs/json-ext": {
       "version": "0.5.7",
-      "resolved": "https://registry.npmmirror.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
       "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
       "dev": true
     },
@@ -2420,7 +2420,7 @@
     },
     "@polka/url": {
       "version": "1.0.0-next.21",
-      "resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.21.tgz",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz",
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
@@ -3307,6 +3307,27 @@
         "whatwg-fetch": "^3.6.2"
       },
       "dependencies": {
+        "@vue/vue-loader-v15": {
+          "version": "npm:vue-loader@15.10.1",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
+          "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
+          "dev": true,
+          "requires": {
+            "@vue/component-compiler-utils": "^3.1.0",
+            "hash-sum": "^1.0.2",
+            "loader-utils": "^1.1.0",
+            "vue-hot-reload-api": "^2.3.0",
+            "vue-style-loader": "^4.1.0"
+          },
+          "dependencies": {
+            "hash-sum": {
+              "version": "1.0.2",
+              "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
+              "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
+              "dev": true
+            }
+          }
+        },
         "acorn-walk": {
           "version": "8.2.0",
           "resolved": "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -3378,6 +3399,26 @@
             "tapable": "^2.0.0"
           }
         },
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        },
+        "loader-utils": {
+          "version": "1.4.2",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
+          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
+          "dev": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^1.0.1"
+          }
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmmirror.com/ms/-/ms-2.1.2.tgz",
@@ -3595,47 +3636,6 @@
         "lodash": "^4.17.4"
       }
     },
-    "@vue/vue-loader-v15": {
-      "version": "npm:vue-loader@15.10.1",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
-      "integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
-      "dev": true,
-      "requires": {
-        "@vue/component-compiler-utils": "^3.1.0",
-        "hash-sum": "^1.0.2",
-        "loader-utils": "^1.1.0",
-        "vue-hot-reload-api": "^2.3.0",
-        "vue-style-loader": "^4.1.0"
-      },
-      "dependencies": {
-        "hash-sum": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
-          "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
-          "dev": true
-        },
-        "json5": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
-          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
-        }
-      }
-    },
     "@vue/vue2-jest": {
       "version": "27.0.0",
       "resolved": "https://registry.npmmirror.com/@vue/vue2-jest/-/vue2-jest-27.0.0.tgz",
@@ -7435,7 +7435,7 @@
     },
     "duplexer": {
       "version": "0.1.2",
-      "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
       "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
       "dev": true
     },
@@ -9512,7 +9512,7 @@
     },
     "gzip-size": {
       "version": "6.0.0",
-      "resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz",
       "integrity": "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==",
       "dev": true,
       "requires": {
@@ -14227,7 +14227,7 @@
     },
     "mrmime": {
       "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/mrmime/-/mrmime-1.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
       "integrity": "sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==",
       "dev": true
     },
@@ -14987,7 +14987,7 @@
     },
     "opener": {
       "version": "1.5.2",
-      "resolved": "https://registry.npmmirror.com/opener/-/opener-1.5.2.tgz",
+      "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
       "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
       "dev": true
     },
@@ -17440,7 +17440,7 @@
     },
     "sirv": {
       "version": "1.0.19",
-      "resolved": "https://registry.npmmirror.com/sirv/-/sirv-1.0.19.tgz",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-1.0.19.tgz",
       "integrity": "sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==",
       "dev": true,
       "requires": {
@@ -19008,7 +19008,7 @@
     },
     "totalist": {
       "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/totalist/-/totalist-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz",
       "integrity": "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==",
       "dev": true
     },
@@ -20004,9 +20004,9 @@
       }
     },
     "webpack-bundle-analyzer": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmmirror.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.8.0.tgz",
-      "integrity": "sha512-ZzoSBePshOKhr+hd8u6oCkZVwpVaXgpw23ScGLFpR6SjYI7+7iIWYarjN6OEYOfRt8o7ZyZZQk0DuMizJ+LEIg==",
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.9.0.tgz",
+      "integrity": "sha512-+bXGmO1LyiNx0i9enBu3H8mv42sj/BJWhZNFwjz92tVnBa9J3JMGo2an2IXlEleoDOPn/Hofl5hr/xCpObUDtw==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "0.5.7",
@@ -20023,13 +20023,13 @@
       "dependencies": {
         "acorn-walk": {
           "version": "8.2.0",
-          "resolved": "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-8.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
           "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
           "dev": true
         },
         "ansi-styles": {
           "version": "4.3.0",
-          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
           "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
           "dev": true,
           "requires": {
@@ -20038,7 +20038,7 @@
         },
         "chalk": {
           "version": "4.1.2",
-          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
           "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "dev": true,
           "requires": {
@@ -20048,7 +20048,7 @@
         },
         "color-convert": {
           "version": "2.0.1",
-          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
           "dev": true,
           "requires": {
@@ -20057,25 +20057,25 @@
         },
         "color-name": {
           "version": "1.1.4",
-          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
         "commander": {
           "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/commander/-/commander-7.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
           "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
           "dev": true
         },
         "has-flag": {
           "version": "4.0.0",
-          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
         "supports-color": {
           "version": "7.2.0",
-          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
           "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
           "dev": true,
           "requires": {

data-room-ui/package.json

@@ -127,7 +127,8 @@
     "svg-sprite-loader": "6.0.11",
     "svgo": "1.2.2",
     "url-loader": "^4.1.1",
-    "vue-template-compiler": "2.6.10"
+    "vue-template-compiler": "2.6.10",
+    "webpack-bundle-analyzer": "^4.9.0"
   },
   "engines": {
     "node": ">=8.9",

data-room-ui/vue.config.example.js

@@ -5,6 +5,7 @@
 'use strict'
 const path = require('path')
 const CompressionPlugin = require('compression-webpack-plugin')
+// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const webpack = require('webpack')
 function resolve (dir) {
   return path.join(__dirname, dir)
@@ -85,6 +86,7 @@ module.exports = {
     if (process.env.NODE_ENV === 'production') {
       return {
         plugins: [
+          // new BundleAnalyzerPlugin(),
           new CompressionPlugin({
             cache: true, // 开启缓存
             test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
@@ -104,6 +106,59 @@ module.exports = {
   },
 
   chainWebpack: config => {
+    config.optimization.splitChunks({
+      cacheGroups: {
+        element: {
+          name: 'element-ui',
+          test: /[\\/]element-ui[\\/]/,
+          chunks: 'all',
+          priority: 10, // 优化将优先考虑具有更高 priority（优先级）的缓存组
+        },
+        remotevue2loader: {
+          name: 'remote-vue2-loader',
+          test: /[\\/]remote-vue2-loader[\\/]/,
+          chunks: 'all',
+          priority: 10, // 优化将优先考虑具有更高 priority（优先级）的缓存组
+        },
+        echarts: {
+          name: 'echarts',
+          test: /[\\/]echarts[\\/]/,
+          chunks: 'all',
+          priority: 10, // 优化将优先考虑具有更高 priority（优先级）的缓存组
+        },
+        babel: {
+          name: '@babel',
+          test: /[\\/]@babel[\\/]/,
+          chunks: 'all',
+          priority: 10, // 优化将优先考虑具有更高 priority（优先级）的缓存组
+        },
+        vueJsonEditor: {
+          name: 'vue-json-editor',
+          test: /[\\/]vue-json-editor[\\/]/,
+          chunks: 'all',
+          priority: 10, // 优化将优先考虑具有更高 priority（优先级）的缓存组
+        },
+        moment: {
+          name: 'moment',
+          test: /[\\/]moment[\\/]/,
+          chunks: 'all',
+          priority: 10, // 优化将优先考虑具有更高 priority（优先级）的缓存组
+        },
+        antv: {
+          name: '@antv',
+          test: /[\\/]@antv[\\/]/,
+          chunks: 'all',
+          priority: 10, // 优化将优先考虑具有更高 priority（优先级）的缓存组
+        },
+        vendors: {
+          name: 'chunk-vendors',
+          test: /[\\/]node_modules[\\/]/,
+          chunks: 'all',
+          priority: 2,
+          reuseExistingChunk: true
+        }
+      }
+    })
     if (process.env.NODE_ENV === 'production') {
       config.plugin('html-index').tap(args => {
         // html中添加cdn