关于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的完整性