## 楔子因为某个项目需求中需要用到 “动态表单(实际上更偏向于低代码)” 的能力，经过了一段时间的 “技术调研” 后选择了我相对熟悉一点的 amis 低代码引擎。 PS：市面上主流的低代码引擎基本上都是大厂开源的，所以技术栈也基本上也都是 React 的，然而我们的项目使用的却是 Vue3 这就很难受了，虽然也找到个别的 Vue 的低代码引擎，但是不是 Vue2 的就是要收费的，而且个人维护也很难有什么保障（当然也有可能有合适的 Vue3 低代码引擎但是我没找到）。 PS：React 技术栈的 amis 怎么样才能用到 Vue3 的项目中呢？我这边采用的是 React 组件转 Vue 组件，虽然 amis 是有 SDK(应该是完整构建的，可以纯 JS 使用不依赖框架) 版本的，但是经过考虑和衡量最终没有选择使用 SDK，现在看来两种方案使用效果实际上是没有本质上的区别大差不差，不过 React 组件转 Vue 组件，技术负担会更重一点。 PS：本文重点应该是 iframe 的使用，以及类似案例的优化思路和方案，不是 amis 的封装使用。 ## 问题虽然项目的需求得到了一定程度上的满足，但是也衍生出了一些其他的问题，例如 amis-ui 的样式和项目的样式规范不符合而且比较不美观，以及项目加载过慢(经过包装后的 amis 太重，而且公司网络也不太稳定，有时候加载一个几十上百kb的文件都要几十秒)的问题。样式问题在更新 amis 后以及在配置的时候注意一点得到了一定程度上的缓解，但是问题的本质还是没有好的办法解决方法。加载过慢的问题在于项目体积太大了，导致初始加载的时候需要加载的网络资源达到 5.7MB ，总加载资源（解压后）达到惊人的 21.2 MB 这实在太夸张了，但是该问题是有较好的方案可以解决的。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/12a6a60046b545de9a517fc0f85ac31b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1940&h=236&s=510367&e=png&b=fef3fe) ## 解决方案项目体积过大，首次加载资源过多的解决方法不外乎是：压缩、分包、按需加载、资源加速(CDN)。经过各种尝试和验证后采用的是资源加速(CDN) + iframe 来处理，先来说说理由，用 iframe 最大的原因是用来做沙箱机制来隔离样式污染的，用 CDN 结合 iframe 做按需加载和资源加速，同时 CDN 也会有浏览器的相关缓存策略不会因为创建实例重复下载同样的资源。当然也别想的太简单了，具体开发起来还是很复杂的，要考虑的东西和细节也很多，比如：如何与 iframe 进行通讯？如何传递传递对象和方法给 iframe？多实例情况下的多 iframe 如何处理通讯和传参的有效性和可靠性？iframe 的宽高如何自适应？等等 PS：其实之前也尝试过用 iframe 不过当时没有考虑用 CDN 来做资源加载，所以是直接把 node_modules 里面 amis 的 js 文件以及 css 文件读出来，然后再拼接字符串也好，通过 dom 创建标签添加也好都不行，拼接字符串会因为 js 里面的特殊字符而报错，通过 dom 创建标签则是会执行报错，然后就暂时搁置了；现在是打算使用 [jsdelivr](https://www.jsdelivr.com/) 的 CDN 链接来做资源加载，正好可以规避上述问题。 ## 具体实施对 amis 的使用是通过封装过的，并且做成了一个软件包的形式上传到了 npm 源上，所以没有搭建项目框架那一类的，当然也不一定要搭建软件包的框架，简简单单当作一个 vue 组件进行开发就完事儿了。文件主要的基本上只有：`AmisFrame.vue` 和 `iframe.html`; 后面代码示例上会表示文件名的。 ### 第一步：使用 iframe 渲染 amis render 第一步先简简单单用 vue 渲染 iframe，iframe 渲染 amis。 ```AmisFrame.vue