优化更新

package.json

@@ -10,14 +10,18 @@
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "^1.6.8",
     "core-js": "^3.8.3",
+    "css-minimizer-webpack-plugin": "^7.0.0",
     "echarts": "^5.5.0",
     "element-ui": "^2.15.14",
+    "happypack": "^5.0.1",
     "qs": "^6.12.0",
     "svg-sprite-loader": "^6.0.11",
+    "terser-webpack-plugin": "^5.3.10",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
     "vuex": "^3.6.2",
-    "vuex-persistedstate": "^4.1.0"
+    "vuex-persistedstate": "^4.1.0",
+    "workbox-webpack-plugin": "^7.1.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~5.0.0",
@@ -25,7 +29,7 @@
     "@vue/cli-plugin-vuex": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
     "autoprefixer": "^9.8.8",
-    "postcss": "^7.0.39",
+    "postcss": "^8.4.38",
     "sass": "^1.32.7",
     "sass-loader": "^12.0.0",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",

src/router/index.js

@@ -24,14 +24,20 @@ const createRouter = () =>
           {
             path: "cockpitManage",
             name: "cockpitManage",
-            component: () => import("../views/admin/cockpitManage/Index.vue"),
+
+            component: () =>
+              import(
+                /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/Index.vue"
+              ),
             children: [
               // 电子地图
               {
                 path: "electronic-map",
                 name: "electronicMap",
                 component: () =>
-                  import("../views/admin/cockpitManage/electronicMap.vue"),
+                  import(
+                    /*webpackChunkName:'home-cockpitManage'*/ "../views/admin/cockpitManage/electronicMap.vue"
+                  ),
               },
             ],
           },
@@ -40,43 +46,63 @@ const createRouter = () =>
             path: "electronic-map",
             name: "electronicMap",
             component: () =>
-              import("../views/admin/cockpitManage/electronicMap.vue"),
+              import(
+                /*webpackChunkName:'electronic-map'*/ "../views/admin/cockpitManage/electronicMap.vue"
+              ),
           },
           // 数据操作
           {
             path: "dataAdministration",
             name: "dataAdministration",
-            component: () => import("../views/dataAdministration/index.vue"),
+            component: () =>
+              import(
+                /*webpackChunkName:'dataAdministration'*/ "../views/dataAdministration/index.vue"
+              ),
           },
           // 企业信息
           {
             path: "enterprise",
             name: "enterprise",
-            component: () => import("../views/ledger/enterprise.vue"),
+            component: () =>
+              import(
+                /*webpackChunkName:'enterprise'*/ "../views/ledger/enterprise.vue"
+              ),
           },
           // 风场信息
           {
             path: "windsite",
             name: "windsite",
-            component: () => import("../views/ledger/windsite.vue"),
+            component: () =>
+              import(
+                /*webpackChunkName:'windsite'*/ "../views/ledger/windsite.vue"
+              ),
           },
           // 风机信息
           {
             path: "draught",
             name: "draught",
-            component: () => import("../views/ledger/draught.vue"),
+            component: () =>
+              import(
+                /*webpackChunkName:'draught'*/ "../views/ledger/draught.vue"
+              ),
           },
           // 机型信息
           {
             path: "milltype",
             name: "milltype",
-            component: () => import("../views/ledger/milltype.vue"),
+            component: () =>
+              import(
+                /*webpackChunkName:'milltype'*/ "../views/ledger/milltype.vue"
+              ),
           },
           // 测风塔信息
           {
             path: "anemometer",
             name: "anemometer",
-            component: () => import("../views/ledger/anemometer.vue"),
+            component: () =>
+              import(
+                /*webpackChunkName:'anemometer'*/ "../views/ledger/anemometer.vue"
+              ),
           },
         ],
       },

src/views/home/components/mockData.js

@@ -4,14 +4,19 @@ export const orgList = [
     id: "1",
     path: "cockpitManage",
     iconName: "gps",
-    component: () => import("@/views/admin/cockpitManage/Index.vue"),
+    component: () =>
+      import(
+        /*webpackChunkName:'cockpitManage'*/ "@/views/admin/cockpitManage/Index.vue"
+      ),
     children: [
       {
         id: 11,
         name: "电子地图",
         path: "electronic-map",
         component: () =>
-          import("@/views/admin/cockpitManage/electronicMap.vue"),
+          import(
+            /*webpackChunkName:'cockpitManage'*/ "@/views/admin/cockpitManage/electronicMap.vue"
+          ),
       },
     ],
   },
@@ -20,7 +25,9 @@ export const orgList = [
     id: "2",
     iconName: "analyse",
     component: () =>
-      import("@/views/admin/performanceAnalysisManage/Index.vue"),
+      import(
+        /*webpackChunkName:'analyse'*/ "@/views/admin/performanceAnalysisManage/Index.vue"
+      ),
     children: [
       {
         id: 21,
@@ -37,13 +44,17 @@ export const orgList = [
     iconName: "dataManage",
     id: "3",
     path: "dataManage",
-    component: () => import("@/views/system/index.vue"),
+    component: () =>
+      import(/*webpackChunkName:'dataManage'*/ "@/views/system/index.vue"),
     children: [
       {
         id: 31,
         name: "数据操作",
         path: "dataAdministration",
-        component: () => import("@/views/dataAdministration/index.vue"),
+        component: () =>
+          import(
+            /*webpackChunkName:'dataManage'*/ "@/views/dataAdministration/index.vue"
+          ),
       },
     ],
   },
@@ -84,25 +95,35 @@ export const orgList = [
     iconName: "jurisdiction",
     id: "5",
     path: "system",
-    component: () => import("@/views/system/index.vue"),
+    component: () =>
+      import(/*webpackChunkName:'system'*/ "@/views/system/index.vue"),
     children: [
       {
         id: 51,
         name: "用户管理",
         path: "userMag",
-        component: () => import("@/views/system/userMag/index.vue"),
+        component: () =>
+          import(
+            /*webpackChunkName:'system'*/ "@/views/system/userMag/index.vue"
+          ),
       },
       {
         id: 52,
         name: "角色管理",
         path: "roleMag",
-        component: () => import("@/views/system/roleMag/index.vue"),
+        component: () =>
+          import(
+            /*webpackChunkName:'system'*/ "@/views/system/roleMag/index.vue"
+          ),
       },
       {
         id: 53,
         name: "菜单权限",
         path: "menuMag",
-        component: () => import("@/views/system/menuMag/index.vue"),
+        component: () =>
+          import(
+            /*webpackChunkName:'system'*/ "@/views/system/menuMag/index.vue"
+          ),
       },
     ],
   },

vue.config.js

@@ -1,11 +1,15 @@
 const path = require("path");
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const WorkboxPlugin = require("workbox-webpack-plugin");
+const HappyPack = require("happypack");
+const webpack = require("webpack");
 
 function resolve(dir) {
   return path.join(__dirname, dir);
 }
 
 module.exports = {
-  // 解析SVG组件
   chainWebpack(config) {
     config.module.rule("svg").exclude.add(resolve("src/icons")).end();
     config.module
@@ -19,8 +23,27 @@ module.exports = {
         symbolId: "icon-[name]",
       })
       .end();
+
+    config.plugin("happypack").use(HappyPack, [
+      {
+        loaders: ["babel-loader"],
+      },
+    ]);
+
+    // config.plugin('dll').use(webpack.DllPlugin, [
+    //   {
+    //     name: '[name]_library',
+    //     path: path.join(__dirname, 'dll', '[name]-manifest.json'),
+    //   },
+    // ]);
+
+    config.plugin("workbox").use(WorkboxPlugin.GenerateSW, [
+      {
+        clientsClaim: true,
+        skipWaiting: true,
+      },
+    ]);
   },
-  //vue.config.js
   css: {
     loaderOptions: {
       postcss: {
@@ -33,12 +56,12 @@ module.exports = {
   devServer: {
     proxy: {
       "/api": {
-        // target: "http://192.168.5.4:16200", //内网
+        // target: "http://192.168.5.4:16200", // 石月
         target: "http://192.168.50.235:16200",
         // target: "http://106.120.102.238:16600",//外网
         changeOrigin: true,
         pathRewrite: {
-          "^/api": "", //需要rewrite重写的,
+          "^/api": "", // 需要rewrite重写的,
         },
       },
     },
@@ -49,5 +72,13 @@ module.exports = {
         "@": resolve("src"),
       },
     },
+    optimization: {
+      usedExports: true,
+      splitChunks: {
+        chunks: "all",
+      },
+      minimize: true,
+      minimizer: [new TerserPlugin(), new CssMinimizerPlugin()],
+    },
   },
 };