远程组件 -- 引领未来组件开发新浪潮

一、背景

由于公司有一个业务需求：是要小程序中动态加载卡片内容。由于卡片内容经常变化，并且样式布局也可能改动较大。还有一种情况是卡片内容也可能由服务商提供，代码内容无法把控。出于此背景，我们调研了可能的解决方案，感觉都不能满足现状要求：

• 方案一： iframe 方案：由于代码运行在小程序端，iframe 方案无法满足性能要求，并且如果卡片比较多，附加众多 iframe 也不是那么一回事，

• 方案二： 微前端方案：由于卡片内容比较小，一般第三方也不会为此特意部署一台服务器，而且要考虑加载资源跨域问题。

• 方案三：提供源码方案：由于卡片内容经常变化，每次随着他们变动而变更也不是那回事。

• 终极方案，加载远程组件。服务商只要将自己的代码打包成 umd 格式，然后存放在远程可访问的地址上就行，比如 S3、OSS 等。当他们需求变动时，只需求重新打包上传就 OK 了，基座也不用随着他们一起发版变更。

二、优势

• 资源高效

• 灵活便捷

• 一次部署，N 次受益

三、使用场景

• 快速演示组件特性

• 卡片组件，自由定义

• 协同开发，自由组合

• 嵌入开发，业务附属

• 广告投放，引流

四、如何使用

0. 前提

• 远程组件必须使用 umd 格式

• 远程地址必须可以跨域访问

1. 查看 DEMO

1.1 react-demo，加载 Antd5 按钮组件示例，。

• 效果图：

• 

  import React from "react";
  import ReactDOM from "react-dom";
  import dayjs from "dayjs";
  import LoadRemoteComponent from "./components/LoadRemoteComponent";
  
  <LoadRemoteComponent
    urls={["https://cdnjs.cloudflare.com/ajax/libs/antd/5.16.2/antd.min.js"]}
    name="antd.Button"
    options={{
      props: {
        type: "primary",
        loading: true,
      },
      externals: {
        react: {
          import: React,
          export: "React",
        },
        "react-dom": {
          import: ReactDOM,
          export: "ReactDOM",
        },
        dayjs: {
          import: dayjs,
          export: "dayjs",
        },
      },
    }}
  >
    按钮文字
  </LoadRemoteComponent>;
  

1.2 vue-demo，加载 element-plus 按钮组件示例，。

• 效果图：

• 

  <template>
    <LoadRemoteComponent
      :urls="urls"
      name="ElementPlus.ElButton"
      :options="options"
    >
      按钮文字
    </LoadRemoteComponent>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted } from "vue";
  import LoadRemoteComponent from "./components/LoadRemoteComponent/Index.vue";
  
  const urls = ref([
    "https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.7.0/index.full.min.js",
    "https://cdnjs.cloudflare.com/ajax/libs/element-plus/2.7.0/index.min.css",
  ]);
  
  const options = ref({
    props: {
      type: "primary",
      loading: true,
    },
    externals: {
      vue: {
        import: "",
        export: "Vue",
      },
    },
  });
  
  onMounted(() => {
    import("vue").then((vue) => {
      options.value.externals["vue"].import = vue;
    });
  });
  </script>
  

2. 属性解释

• urls: 加载的远程资源地址数组；

• name: 导出的组件名称；

• options

  • props: 导出的远程组件的属性；
  • externals: 远程组件的依赖库；

五、源码

点击访问 GitHub：，👏🏻👏🏻👏🏻 欢迎 Star，欢迎批评指正。