关于javascript:vue2614的前端微服务改造方案

老我的项目 vue2.6.14 的前端微服务革新计划

微前端思维

• 基于接口协议：子利用依照协定导出几个接口，主利用在运行过程中调用子利用导出的这几个接口
• 基于沙箱隔离：主利用创立一个隔离环境，让子利用根本不必思考本人是在什么环境下经营，依照一般的开发思路进行开发即可
• 基于模块协定：主利用把子利用当作一个模块，和模块的应用形式无异

计划抉择

• 路由散发动态资源与 iframe 联合，懂得都懂，问题很大
• 阿里 qiankun(基于 single SPA)：对我的项目侵入性比拟大
• 京东 MicroApp(基于 Web Components) 须要引入脚手架革新
• 腾讯 wujie(基于 Web Components) , 刚开源，未深刻理解
• webpack5(module-federation) 微服务项目, 联合老我的项目只需降级 vue-service 到 5.0 以上即可应用

实现思路

• 主我的项目订阅服务
• 子项目公布服务
• 架构分为根底组件服务，中层业务模块，内部门户。

我的项目革新内容

• 降级局部依赖，webpack 版本升级到 5 以上，应用其 module-federation 新个性

    "@vue/cli-service": "~5.0.0",
    "vue":"^2.7.14",

• 批改入口 js
  新增 bootstrap.js 用于寄存原入口 js 文件 (main.js)，mainjs 批改点

    window.componentsUrl = "http://localhost:1006"; 
    import bootstrap from "./bootstrap";
    bootstrap;

• 批改 vue.config.js 实现 bootstrap.js 懒加载

   {
     test: /bootstrap\.js$/,
     loader: "bundle-loader",
     options: {lazy: true,},
   },

• 主我的项目 chainWebpack 示例（基于本地服务 ip 订阅）：

    config
      .plugin("module-federation-plugin")
      .use(require("webpack").container.ModuleFederationPlugin, [
        {
          name: "web",
          remotes: {app1: "app1@http://localhost:8084/remoteEntry.js",},
        },
      ]);

• 子项目 chainWebpack 示例（公布子项目组件或者页面）

   config
      .plugin("module-federation-plugin")
      .use(require("webpack").container.ModuleFederationPlugin, [
        {
          name: "app1", // 模块名称
          filename: "remoteEntry.js",
          exposes: {
            // 对外裸露的组件
            "./HelloWorld": "./src/components/HelloWorld.vue",
          },
        },
      ]);

• dev 代理配置（路由重定向到所订阅的服务）

      "/componentsService": {
        changeOrigin: true,
        target: process.env.VUE_APP_OA_componentsUrl,
        pathRewrite: {["^" + "/componentsService"]: "",
        },
      },
      "/workflowService": {
        changeOrigin: true,
        target: process.env.VUE_APP_workflowUrl,
        pathRewrite: {["^" + "/workflowService"]: "",
        },
      },

页面模块共享示例

• zc-workflow-web 服务发布页面

    exposes: {"./workflowMatters":"./src/views/workflow/workflowMatters/index.vue",}

• zc-system-web 门户服务订阅服务

    remotes: {workflow:"workflow@[window.workflowUrl]/workflowRemoteEntry.js",
    },

• main.js 注册工作流服务门路, 并配置代理

    window.workflowUrl = "http://localhost:9001";

  组件模块共享示例

• zc-components-web 服务暴露出组件 vue.config.js

      config
            .plugin("module-federation-plugin")
            .use(require("webpack").container.ModuleFederationPlugin, [{ ...setupModule},
            ]);
      moduleSetUp.js
      const dependencies = require("./package.json").dependencies;
      module.exports = {
        name: "oa_components", // 模块名称
        filename: "remoteEntry.js",
        exposes: {"./ThemeSearchBar": "./src/components/searchBar/src/index.vue",},
        shared: [
          "vuex",
          "vue-router",
          "element-ui",
          {
            vue: {
              eager: true,
              singleton: true,
              requiredVersion: dependencies["vue"],
            },
          },
        ],
      };

• zc-workflow-web 工作流服务服务援用组件 vue.config.js

      remotes: {
                  oa_components:
                    "oa_components@[window.oa_componentsUrl]/remoteEntry.js",
                },
  
      import ThemeSearchBar from "oa_components/ThemeSearchBar";
  
      export default {install(Vue) {Vue.component(ThemeSearchBar.name, ThemeSearchBar);
        },
      };

nginx 配置

• 依据须要独立 ip 通过文件门路代理
• 不同 ip 通过 proxy_pass 代理
• 不同服务器通过 proxy_pass

总结

长处

• 组件服务能够装置到动态资源服务器，与文档，字体，icon 库对立配置。
• 每个模块都是一个服务，不同模块业务解耦，独立装置部署，拆解灵便度增高，新需要按需引入即可。
• module-federation 按需加载与合理配置资源服务，中大型项目首屏加载启动速度 10 秒内。

毛病

• 需自行治理配置款式隔离
• 须要部署服务增多，我的项目拆分颗粒度要审慎把握
• 单个模块不能 split, 需保障 runtimejs 的完整性