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

发表于

一、背景

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

  • 方案一： iframe 方案：由于代码运行在小程序端，iframe 方案无法满足性能要求，并且如果卡片比较多，附加众多 iframe 也不是那么一回事，
  • 方案二： 微前端方案：由于卡片内容比较小，一般第三方也不会为此特意部署一台服务器，而且要考虑加载资源跨域问题。
  • 方案三：提供源码方案：由于卡片内容经常变化，每次随着他们变动而变更也不是那回事。
  • 终极方案，加载远程组件。服务商只要将自己的代码打包成 umd 格式，然后存放在远程可访问的地址上就行，比如 S3、OSS 等。当他们需求变动时，只需求重新打包上传就 OK 了，基座也不用随着他们一起发版变更。

二、优势

  • 资源高效
  • 灵活便捷
  • 一次部署，N 次受益

三、使用场景

  • 快速演示组件特性
  • 卡片组件，自由定义
  • 协同开发，自由组合
  • 嵌入开发，业务附属
  • 广告投放，引流

四、如何使用

0. 前提

  • 远程组件必须使用 umd 格式
  • 远程地址必须可以跨域访问

1. 查看 DEMO

1.1 react-demo，加载 Antd5 按钮组件示例，在线预览。

  • 效果图：
  • image
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
tsx复制代码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 按钮组件示例，在线预览。

  • 效果图：
  • image
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
vue复制代码<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：Import-Remote-Component，👏🏻👏🏻👏🏻 欢迎 Star，欢迎批评指正。

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%