optimized frontend output file size

frontend/.env.analyze

@@ -0,0 +1,2 @@
+NODE_ENV='analyze'
+VUE_APP_API_BASE_URL=http://localhost:8000

frontend/package.json

@@ -7,7 +7,8 @@
     "serve:dist": "serve dist",
     "build": "vue-cli-service build",
     "build:development": "vue-cli-service build --mode development",
-    "build:docker": "vue-cli-service build --mode docker"
+    "build:docker": "vue-cli-service build --mode docker",
+    "build:analyze": "vue-cli-service build --mode analyze"
   },
   "author": {
     "name": "Marvin Zhang",
@@ -15,13 +16,24 @@
   },
   "license": "BSD-3-Clause",
   "dependencies": {
-    "crawlab-ui": "0.6.0-beta.20211229.1830",
+    "@element-plus/icons": "^0.0.11",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/vue-fontawesome": "^3.0.0-4",
+    "atom-material-icons": "^3.0.0",
+    "codemirror": "^5.59.1",
+    "echarts": "^5.1.2",
+    "element-plus": "^1.2.0-beta.3",
     "vue": "3.0.11",
     "vue-router": "^4.0.11"
   },
   "devDependencies": {
     "@vue/cli-service": "^4.5.13",
     "@vue/compiler-sfc": "^3.0.11",
-    "serve": "^13.0.2"
+    "copy-webpack-plugin": "^6.0",
+    "serve": "^13.0.2",
+    "webpack-bundle-analyzer": "^4.5.0"
   }
 }

frontend/vue.config.js

@@ -1,3 +1,13 @@
+const path = require("path")
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+
+const alias = {
+  'element-plus$': 'element-plus/dist/index.full.min.js',
+  'echarts$': 'echarts/dist/echarts.min.js',
+  'codemirror$': 'codemirror/lib/codemirror.js',
+}
+
 const optimization = {
   splitChunks: {
     chunks: 'initial',
@@ -5,18 +15,13 @@ const optimization = {
     minChunks: 1,
     maxAsyncRequests: 3,
     cacheGroups: {
-      defaultVendors: {
-        test: /[\\/]node_modules[\\/]]/,
+      vendors: {
+        test: /[\\/]node_modules[\\/]/,
         priority: -10,
-        reuseExistingChunk: true
+        reuseExistingChunk: true,
       },
-      default: {
-        minChunks: 2,
-        priority: -20,
-        reuseExistingChunk: true
-      }
-    }
-  }
+    },
+  },
 }
 
 const config = {
@@ -31,8 +36,27 @@ const config = {
   outputDir: './dist',
   configureWebpack: {
     optimization,
+    resolve: {
+      alias,
+    },
     plugins: []
   }
 }
 
+if (['development', 'local'].includes(process.env.NODE_ENV)) {
+  // do nothing
+} else if (['production'].includes(process.env.NODE_ENV)) {
+  config.configureWebpack.plugins.push(new CopyWebpackPlugin({
+    patterns: [
+      {
+        from: path.resolve(__dirname, 'public/js'),
+      }
+    ]
+  }))
+} else if (['analyze'].includes(process.env.NODE_ENV)) {
+  config.configureWebpack.plugins.push(new BundleAnalyzerPlugin({
+    analyzePort: 8890,
+  }))
+}
+
 module.exports = config