优化调整web端内存溢出的问题

.gitignore

@@ -26,3 +26,4 @@ yarn-error.log*
 /project/*/index.js
 /project/*/dist
 /ui/package-lock.json
+/examples/modules.json

bin/mods.js

@@ -0,0 +1,33 @@
+const {chalkTag, findApp, fs, fsExtra} = require("./tools");
+const compiler = require('vue-template-compiler')
+const getAppInfo = (file, apps) => {
+  if (/[\\\/](App[A-Z][^\\\/]+)\.vue$/g.test(file)) {
+    const name = file.replace(/.+[\\\/](App[^\\\/]+)\.vue$/, '$1'),
+        source = fs.readFileSync(file).toString(),
+        parsed = compiler.parseComponent(source),
+        script = parsed.script?.content || "",
+        label = script.match(/label:[^,]+/)?.[0]?.replace(/.+["']([^"']+).+/, '$1')
+    const paths = file.split(/[\\\/]/)
+    apps.push({
+      id: file.replace(/\.vue$/, '').replace(/[\\\/]/g, '_'),
+      label: label || name,
+      path: `/${file.replace(/\.vue$/, '').replace(/[\\\/]/g, '/')}`,
+      workspace: paths.at(0),
+      esm: ['.', paths.slice(1)].flat().join("/"),
+      name
+    })
+  }
+}
+
+const start = () => {
+  chalkTag.info("开始扫描库工程...")
+  const list = []
+  Promise.all([
+    findApp('packages', app => getAppInfo(app, list)),
+    findApp('project', app => getAppInfo(app, list)),
+  ]).then(() => {
+    fsExtra.outputJson('examples/modules.json', {apps: list})
+    chalkTag.done("扫描完毕")
+  })
+}
+start()

examples/router/autoRoutes.js

@@ -2,6 +2,8 @@ import store from "../store";
 import {waiting} from "../utils";
 import appEntry from "../views/appEntry";
 import router from "./router";
+import mods from "../modules"
+import Vue from "vue";
 
 export default {
   routes: () => store.state.apps,
@@ -9,32 +11,47 @@ export default {
     //约束正则式
     store.commit("cleanApps")
     // 自动化本工程应用
-    this.loadApps()
+    waiting.init({innerHTML: '应用加载中..'})
+    this.esm = {
+      packages: require.context('../../packages/', true, /\.(\/.+)\/App[A-Z][^\/]+\.vue$/, 'lazy'),
+      project: require.context('../../project/', true, /\.(\/.+)\/App[A-Z][^\/]+\.vue$/, 'lazy')
+    }
+    const startTime = new Date().getTime()
+    this.loadApps().finally(() => {
+      console.log('模块加载用了%s秒', (new Date().getTime() - startTime) / 1000)
+      waiting.close()
+    })
+  },
+  loadMods() {
+    return Promise.all(mods.apps.map(e => {
+      Vue.component(e.name, this.esm[e.workspace](e.esm))
+      const addApp = {...e, component: appEntry}
+      waiting.setContent(`加载${e.name}...`)
+      //命名规范入口文件必须以App开头
+      return store.commit("addApp", addApp)
+    }))
   },
   loadApps() {
     //新App的自动化格式
-    let apps = require.context('../../packages/', true, /\.(\/.+)\/App[A-Z][^\/]+\.vue$/, 'lazy-once'),
-        projects = require.context('../../project/', true, /\.(\/.+)\/App[A-Z][^\/]+\.vue$/, 'lazy-once')
     const promise = (mods, base) => Promise.all(mods.keys().map(path => mods(path).then(file => {
       if (file.default) {
-        let {name, label} = file.default,
-            addApp = {
+        const {name, label} = file.default
+        const addApp = {
           name: [base, path.replace(/\.\/?(vue)?/g, '')?.split("/")].flat().join("_"),
           label: label || name,
           path: `/${base}${path.replace(/\.(\/.+\/App.+)\.vue$/, '$1')}`,
           component: appEntry,
-              module: file.default
+          esm: file.default
         }
         waiting.setContent(`加载${name}...`)
         router.addRoute(addApp)
         //命名规范入口文件必须以App开头
         return store.commit("addApp", addApp)
       } else return 0
-    })))
-    waiting.init({innerHTML: '应用加载中..'})
-    Promise.all([
-      promise(apps, "packages"),
-      promise(projects, "project")
-    ]).finally(() => waiting.close())
+    }).catch(err => console.log(err))))
+    return Promise.all([
+      promise(this.esm.packages, "packages"),
+      promise(this.esm.project, "project")
+    ])
   }
 }

examples/router/axios.js

@@ -21,8 +21,8 @@ instance.interceptors.request.use(config => {
     config.baseURL = "/qxn"
   } else if (/\/xiushan/.test(location.pathname)) {
     config.baseURL = "/xsjr"
-  } else if (/project\/oms/.test(location.pathname)) {
-    config.baseURL = "/omsapi"
+  // } else if (/project\/oms/.test(location.pathname)) {
+  //   config.baseURL = "/omsapi"
   } else if (/#url-/.test(location.hash)) {
     config.baseURL = location.hash.replace(/#url-/, '/')
   }

examples/views/appEntry.vue

@@ -8,6 +8,7 @@
 <script>
 
 import {mapState} from "vuex";
+import Vue from "vue";
 
 export default {
   name: "appEntry",
@@ -15,8 +16,8 @@ export default {
   computed: {
     ...mapState(['apps']),
     app() {
-      let app = this.apps.find(e => e.name == this.$route.name)
-      return app ? app.module : ""
+      const app = this.apps.find(e => e.name == this.$route.name)
+      return app.esm ?? ""
     }
   },
   mounted() {

vue.config.js

@@ -27,10 +27,10 @@ module.exports = {
     .add(path.resolve(__dirname, 'project'))
     .add(path.resolve(__dirname, 'examples'))
     .add(path.resolve(__dirname, 'ui'))
-    .end()
-    .use('babel')
-    .loader('babel-loader')
-    .tap(options => options);
+    .end().use('babel').loader('babel-loader').tap(options => options);
+    config.output.chunkFilename('[name].js');
+    config.plugins.delete("friendly-errors");
+    config.plugin("limit").use(require("webpack/lib/optimize/LimitChunkCountPlugin"), [{maxChunks: 10}]).tap(options => options)
   },
   devServer: {
     host: '0.0.0.0', //主机地址
@@ -136,6 +136,6 @@ module.exports = {
         }
       }
     },
-    disableHostCheck: true
+    disableHostCheck: true,
   }
 };