超级变变变，动态云组件加载实践

向右看齐 2022-09-03 05:28 214阅读 0赞

> 动态组件可以说在可视化配置系统中常用的组件，也是能够实现可视化中，实现组件的核心要点。

# ○ 背景 #

> 这篇是作者在公司做了活动架构升级后，产出的主文的前导篇，考虑到本文相对独立，因此抽离出单独成文。

题目为动态组件，但为了好理解可以叫做远程加载动态组件，后面统一简化称为“远程组件”。

具体是怎么玩呢？别着急，听我慢慢道来，看完后会感慨Vue组件还能这么玩????，还会学会一个Stylelint插件，配有DEMO，以及隐藏在最后的彩蛋。

作者曾所在我司广告事业部，广告承载方式是以刮刮卡、大转盘等活动页进行展示，然后用户参与出广告券弹层。

旁白说：远程组件其实在可视化低代码平台也有类似应用，而我们这里也是利用了类似思路实现解耦了活动页和券弹层。继续主题...

![ee5bab34cf86f76c86f0802168a7ad69.png][] image.png

遗留系统早先版本是一个活动就绑定一个弹层，1对1的绑定关系。

![30cd1bd49afe6571d458a97cc6f0279b.png][] image.png

现在的场景是一个活动可能出不同样式的弹层，这得把绑定关系解除。我们需要多对多，就是一个活动页面可以对应多个广告券弹层，也可以一个广告券弹层对应多个活动页面。

我们可以在本地预先写好几个弹层，根据条件选择不同的弹层，可以满足一个活动对多个弹层。

而我们的需求是让活动页面对应无数种弹层，而不是多种，所以不可能把所有弹层都写在本地。因此怎么办呢？

![43fde709289997f24804e0f7bfcdeade.png][] image.png

因此我们要根据所需，然后通过判断所需的弹层，远端返回对应的代码。其实就是我们主题要讲到的**远程组件**。

讲得容易，该怎么做呢？

# ○ 远程组件核心 #

## Pure版本 ##

如果是Pure JS、CSS组成的弹层，很自然的我们想到，通过动态的插入JS脚本和CSS，就能组成一个弹层。因此把编译好的JS、CSS文件可以存放在远端CDN。

![e8d4130b3e1a8ebe805cd7dcb26e259d.png][] image.png

看上图，我们可以看到弹窗出来之前，浏览器把CSS、JS下载下来了，然后根据既定代码拼装成一个弹层。

// CSS插入
    <link rel="stylesheet" href="//yun.xxx.com/xxx.css">
    
    // JS的动态插入
    
    <script type="text/javascript">
      var oHead = document.querySelector('.modal-group');
      var oScript = document.createElement('script');
      oScript.type = "text/javascript";
      oScript.src = "//yun.xxx.com/xxx.js";
      oHead.appendChild(oScript);
    </script>

通过上面可知，JS、CSS方式能实现Pure版本的远程组件，而在Vue环境下能实现吗。如果按照Pure JS、CSS动态插入到Vue活动下，也是可以很粗糙的实现的。

但有没有更优雅的方式呢？

![8621bad6e841e6e1408db6cd79e7c062.png][] image.png

## Vue版本 ##

> 选型这篇不细讨论了，后续的主篇会讲为什么选择Vue。

上述是遗留系统的方式，如果我们要技术栈迁移到Vue，也需要对远程组件迁移，我们需要改造它。

让我们来回顾下Vue的一些概念。

### 组件形式 ###

「对象组件」

一个弹窗，其实我们可以通过一个Vue组件表示，我们想把这个组件放到CDN，直接下载这个文件，然后在浏览器环境运行它可行吗？我们来尝试下。

基于Vue官方文档，我们可以把如下的选项对象传入Vue，通过new Vue来创建一个组件。

{
      mounted: () => {
       console.log('加载')
      },
      template: "<div v-bind:style=\"{ color: 'red', fontSize: '12' + 'px' }\">Home component</div>"
    }

借助于包含编译器的运行时版本，我们可以处理字符串形式的Template。

> \-- 运行时-编译器-vs-只包含运行时

> 如果你需要在客户端编译模板 (比如传入一个字符串给Template选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版

似乎找到了新世界的大门。

![d488be84a7b0bf130602efa208a8e300.png][] image.png

我们确实是可以通过这种形式实现Template、Script、CSS了，但对于开发同学，字符串形式的Template、内嵌的CSS，开发体验不友好。

![642938a84c75deb9836062f12fb66227.png][] image.png

「单文件组件」

这个时候很自然地想到SFC - 单文件组件。

> 文件扩展名为.vue的\*\*single-file components (单文件组件)\*\*为以上所有问题提供了解决方法 -- Vue文档。

> ![52f940beaabf7a3abf422bd005f352af.png][] image.png

但怎么样才能让一个.vue组件从远端下载下来，然后在当前活动Vue环境下运行呢？这是个问题，由于.vue文件浏览器是识别不了的，但.js文件是可以的。

我们先想一下，.vue文件是最终被转换成了什么？

![34986838e940bb8e4aa88939a73ce5bf.png][]（图片来源：1.03-vue文件的转换 - 简书）

通过转换，实际变成了一个JS对象。所以怎么才能把.vue转换成.js呢？

有两种方式，一种通过运行时转换，我们找到了http-vue-loader。通过Ajax获取内容，解析Template、CSS、Script，输出一个JS对象。

![8f9b33d81e9a1fe5db32942fb304baeb.png][] image.png

而考虑到性能和兼容性，我们选择预编译，通过CSS预处理器、HTML模版预编译器。

Vue的官方提供了vue-loader，它会解析文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。这指的是什么意思呢？官方提供选项对象形式的组件DEMO。

有了理论支持，现在需要考虑下实践啦，用什么编译？

![0bbd30bc789366a7c99d0ade41bdb20f.png][] image.png

### 怎么构建 ###

由于webpack编译后会带了很多关于模块化相关的无用代码，所以一般小型的库会选择rollup，这里我们也选择rollup。

// rollup.config.js
    import vue from 'rollup-plugin-vue'
    import commonjs from 'rollup-plugin-commonjs'
    
    export default {
      input: './skin/SkinDemo.vue',
      output: {
        format: 'iife',
        file: './dist/rollup.js',
        name: 'MyComponent'
      },
      plugins: [
        commonjs(),
        vue()
      ]
    }

通过rollup-plugin-vue，我们可以把.vue文件转成.js， rollup编译输出的iife形式js。

![5d4c6b12c672192b06f136260d492598.png][] image.png

可以看到script、style、template分别被处理成对应的片段，通过整合计算，这些片段会生成一个JS对象，保存为.js文件。下图就是一个组件选项的对象。

![1976b95a1a120e20264b49bb8fca64de.png][] image.png

可以通过项目：https://github.com/fly0o0/remote-component，尝试下rollup文件夹下的构建，具体看README说明。

我们已经有了一个 Vue.js 组件选项的对象，怎么去让它挂载到对应的Vue App上呢？

![fa7f86f46ab93b815dd54dcd040fc535.png][] image.png

### 挂载方式 ###

回想之前通读Vue入门文档，遇到一个动态组件的概念，但当时并不太理解它的使用场景。![ec33ff2d5ecbec3f328b831c58abc158.png][]

动态组件是可以不固定具体的组件，根据规则替换不同的组件。从文档上看出，支持一个组件的选项对象。

### 最终实现 ###

首先需要构建.vue文件，然后通过Ajax或动态Script去加载远端JS。由于Ajax会有跨域限制，所以这里我们选择动态Script形式去加载。

而我们刚才使用Rollup导出的方式是把内容挂载在一个全局变量上。那就知道了，通过动态Script插入后，就有一个全局变量MyComponent，把它挂载在动态组件，最终就能把组件显示在页面上了。

具体怎么操作？欠缺哪些步骤，首先我们需要一个加载远程.js组件的函数。

// 加载远程组件js
    
    function cleanup(script){
      if (script.parentNode) script.parentNode.removeChild(script)
      script.onload = null
      script.onerror = null
      script = null
    }
    
    function scriptLoad(url) {
      const target = document.getElementsByTagName('script')[0] || document.head
    
      let script = document.createElement('script')
      script.src = url
      target.parentNode.insertBefore(script, target)
    
      return new Promise((resolve, reject) => {
        script.onload = function () {
          resolve()
          cleanup(script)
        }
        script.onerror = function () {
          reject(new Error('script load failed'))
          cleanup(script)
        }
      })
    }
    
    export default scriptLoad

然后把加载下来的组件，挂载在对应的动态组件上。

<template>
      <component
        class="remote-test"
        :is="mode">
      </component>
    </template>
    
    <script>
    import scriptLoad from "./scriptLoad"
    
    export default {
      name: "Remote",
      data() {
        return {
          mode: "",
        };
      },
      mounted() {
        this.mountCom(this.url)
      },
      methods: {
        async mountCom(url) {
          // 下载远程js
          await scriptLoad(url)
    
          // 挂载在mode
          this.mode = window.MyComponent
    
          // 清除MyComponent
          window.MyComponent = null
        },
      }
    }
    </script>

基本一个Vue的远程组件就实现了，但发现还存在一个问题。

![a465bfae9d8f202b1e1dd6f707eed95e.png][] image.png

全局变量MyComponent需要约定好，但要实现比较好的开发体验来说，应该尽量减少约定。

### 导出方式 ###

怎么解决呢？由于我们导出是使用的IIFE方式，其实Rollup还支持UMD方式，包含了Common JS和AMD两种方式。

我们通过配置Rollup支持UMD。

// rollup.config.js
    import vue from 'rollup-plugin-vue'
    import commonjs from 'rollup-plugin-commonjs'
    
    export default {
      input: './skin/SkinDemo.vue',
      output: {
        format: 'umd',
        file: './dist/rollup.js',
        name: 'MyComponent'
      },
      plugins: [
        commonjs(),
        vue()
      ]
    }

可以看到构建完毕后，支持三种方式导出。![5e6d1389635547ca6a7a9275d73a7f82.png][]

我们可以模拟node环境，命名全局变量exports、module，就可以在module.exports变量上拿到导出的组件。![c5a96767b46073ee36531884395b3c0e.png][]

具体实现核心代码如下。

<template>
      <component
        class="remote-test"
        :is="mode">
      </component>
    </template>
    
    <script>
    import scriptLoad from "./scriptLoad"
    
    export default {
      name: "Remote",
      data() {
        return {
          mode: "",
        };
      },
      mounted() {
        this.mountCom(this.url)
      },
      methods: {
        async mountCom(url) {
          // 模拟node环境
          window.module = {}
          window.exports = {}
    
          // 下载远程js
          await scriptLoad(url)
    
          // 挂载在mode
          this.mode = window.module.exports
    
          // 清除
          delete window.module
          delete window.exports
        },
      }
    }
    </script>

终于搞定了Vue版本的远程组件加载的方式。

![efdc97ff14550623c0a7e317f954f394.png][] image.png

接下来得想一想，怎么处理远程组件（弹层）的设计了。

## 小结 ##

通过使用Vue动态组件实现了远程组件功能，取代了老架构。![eb928c53b33355bfc65065060ad467e9.png][]

可以通过以下地址去尝试一下远程组件弹层，按照项目的README操作一下。会得到以下远程组件弹层。

项目地址：https://github.com/fly0o0/remote-component

![dc69aee293f1c468d727d84b50181204.png][] image.png

# ○ 远程组件（弹层）设计 #

> 远程组件已达成，这部分主要是对远程弹层组件的一些设计。

对于远程单组件本身来说，只需要根据数据渲染视图，根据用户行为触发业务逻辑，整个代码逻辑是这样的。

需要考虑组件复用、组件通讯、组件封装、样式层级等方向。

首先我们先看看组件复用。

为了方便统一管理和减少冗余代码，我们一般写一些类似的组件会抽取一部分可以公共的组件，例如按钮等。

但远程单组件代码和页面端代码是分离的啊（可以理解为两个webpack入口打包出的产物），我们得想想公共组件需要放在哪里了。

![4c7be20d05aab11e635e47a955c92edc.png][] image.png

## 组件复用 ##

现在可以发现有三种情况，我们利用枚举法尝试想一遍。

### 打包 ???? ###

**公共组件和远程组件打包一起**

放在一起肯定不合适，不仅会引起远程组件变大，还不能让其他远程组件复用。往下考虑再看看。

![d0c20b08c14dd21d46b8752c2e55503d.png][]

**公共组件单独打包**

远程组件、公共组件分别单独打包，这样也是不利的，由于远程组件抽离的公共组件少于5个，而且代码量较少，单独作为一层打包，会多一个后置请求，影响远程组件的第一时间展示。

继续考虑再看看。![3d4a345772442f062a5d81cbe006fd2f.png][]**公共组件和页面核心库打包一起**

把公共组件和页面核心库打包到一起，避免后面远程组件用到时候再加载，可以提升远程组件的展示速度。![8ad526c34e19c2672c7aedec59fb5932.png][]

因此最终敲定选择最后种，把公共组件和页面核心库打包在一起。

如果把远程组件.js和公共组件分开了，那我们该怎么才能使用公共组件啊？????

![89ddf0dc66dc9e0875d8e1fff31091e3.png][] image.png

### 注册 ???? ###

回顾下Vue官方文档，Vue.component它可以提供注册组件的能力，然后在全局能引用到。我们来试试吧。

公共组件例如按钮、关闭等，需要通过以下途径去注册。

**一个按钮组件**

// 本地页面端（本地是相较于在远端CDN）
    
    
    <template>
      <button type="button" class="btn" @click="use">
      </button>
    </template>
    
    <script>
    export default {
      name: 'Button',
      inject: ['couponUseCallback'],
      methods: {
        use() {
          this.couponUseCallback && this.couponUseCallback()
        }
      }
    }
    </script>

**一个关闭组件**

// 本地页面端（本地是相较于在远端CDN）
    
    
    <template>
      <span @click="close" class="close"></span>
    </template>
    
    <script>
    export default {
      name: "CouponClose",
      inject: ["couponCloseCallback"],
      methods: {
        close() {
          this.couponCloseCallback && this.couponCloseCallback();
        },
      },
    };
    </script>
    
    <style lang="less" scoped>
    .close {
      &.gg {
        background-image: url("//yun.tuisnake.com/h5-mami/dist/close-gg.png") !important;
        background-size: 100% !important;
        width: 92px !important;
        height: 60px !important;
      }
    }
    </style>

通过Vue.component全局注册公共组件，这样在远程组件中我们就可以直接调用了。

// 本地页面端（本地是相较于在远端CDN）
    
    <script>
      Vue.component("CpButton", Button);
      Vue.component("CpClose", Close);
    </script>

解决了公共组件复用的问题，后面需要考虑下远程组件和页面容器，还有不同类型的远程组件之间的通讯问题。

![397d67790342fa0080d85e6283d0ddea.png][] image.png

## 组件通讯 ##

可以把页面容器理解为父亲、远程组件理解为儿子，两者存在父子组件跨级双向通讯，这里的父子也包含了爷孙和爷爷孙的情况，因此非props可以支持。那怎么处理？

可以通过在页面核心库中向远程组件 provide 自身，远程组件中 inject 活动实例，实现事件的触发及回调。

那不同类型的远程组件之间怎么办呢，使用Event Bus，可以利用顶层页面实例作为事件中心，利用 on 和 emit 进行沟通，降低不同类别远程组件之间的耦合度。

![3278123d89fdf8f9eee041c140e32cb5.png][] image.png

## 组件封装 ##

现在有个组件封装的问题，先看个例子，基本就大概有了解了。

现有3个嵌套组件，如下图。\*\* \*\*现在需要从顶层组件Main.vue给底层组件RealComponent的一个count赋值，然后监听RealComponent的input组件的事件，如果有改变通知Main.vue里的方法。怎么做呢？

![cc89d7c0b04b55d3d632ce87a40f5e83.png][]

跨层级通信，有多少种方案可以选择？

1.  我们使用vuex来进行数据管理，对于这个需求过重。
2.  自定义vue bus事件总线（如上面提到的），无明显依赖关系的消息传递，如果传递组件所需的props不太合适。
3.  通过props一层一层传递，但需要传递的事件和属性较多，增加维护成本。

而还有一种方式可以通过和listeners，实现跨层级属性和事件“透传”。

**主组件**

// Main.vue
    
    <template>
    <div>
      <h2>组件Main 数据项:{
        {count}}</h2>
      <ComponentWrapper @changeCount="changeCount" :count="count">
      </ComponentWrapper>
    </div>
    </template>
    <script>
    import ComponentWrapper from "./ComponentWrapper";
    export default {
      data() {
        return {
          count: 100
        };
      },
      components: {
        ComponentWrapper
      },
      methods: {
        changeCount(val) {
          console.log('Top count', val)
          this.count = val;
        }
      }
    };
    </script>

**包装用的组件**

有的时候我们为了对真实组件进行一些功能增加，这时候就需要用到包装组件（特别是对第三方组件库进行封装的时候）。

// ComponentWrapper.vue
    
    <template>
      <div>
        <h3>组件包裹层</h3>
        <RealComponent v-bind="$attrs" v-on="$listeners"></RealComponent>
      </div>
    </template>
    <script>
    import RealComponent from "./RealComponent";
    export default {
      inheritAttrs: false, // 默认就是true
      components: {
        RealComponent
      }
    };
    </script>

**真正的组件**

// RealComponent.vue
    
    <template>
      <div>
        <h3>真实组件</h3>
        <input v-model="myCount" @input="inputHanlder" />
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          myCount: 0
        }
      },
      created() {
        this.myCount = this.$attrs.count;  // 在组件Main中传递过来的属性
        console.info(this.$attrs, this.$listeners);
      },
      methods: {
        inputHanlder() {
          console.log('Bottom count', this.myCount)
          this.$emit("changeCount", this.myCount); // 在组件Main中传递过来的事件，通过emit调用顶层的事件
          // this.$listeners.changeCount(this.myCount) // 或者通过回调的方式
        }
      }
    };
    </script>

从例子中回归本文里来，我们要面对的场景是如下这样。

远程组件其实有两层，一层是本地（页面内），一层是远端（CDN）。本地这层只是做封装用的，可以理解为只是包装了一层，没有实际功能。这时候可以理解为本地这一层组件就是包装层，包装层主要做了导入远程组件的功能没办法去除，需要利用上面的特性去传递信息给远程组件。

## 样式层级 ##

远程组件在本文可以简单理解为远端的弹层组件，公司业务又涉及到不同的弹层类别，每种弹层类别可能会重叠。

### 约定z-index ###

因此划分 0～90 为划分十层，后续可根据实际情况增加数值，设定各远程组件容器只能在规定层级内指定 z-index。

// const.js
    const FLOOR = {
      MAIN: 0,   // 主页面容器
      COUPON_MODAL: 20,  // 广告弹层
      OTHER_MODAL: 30, // 其他弹层
      ERROR_MODAL: 90,
      ...
    }

设置每种远程组件即弹层的包裹层。

// CouponModalWrapper.vue
    <script>
    <template>
      <div class="modal-wrapper" :style="{'z-index': FLOOR.COUPON_MODAL}" @touchmove.prevent>
        <slot></slot>
      </div>
    </template>
    
    // OtherModalWrapper.vue
    <template>
      <div class="modal-wrapper" :style="{'z-index': FLOOR.OTHER_MODAL}" @touchmove.prevent>
        <slot></slot>
      </div>
    </template>
    
    // 这里只是为了表意简单，实际上两个Wrapper.vue可以合并

然后每类别各自引入对应的弹层包裹层。

// 每类别公共组件有一个
    
    // CouponModal2.vue  
    <template>
      <CouponModalWrapper>
    		...
      </CouponModalWrapper>
    </template>
      
    // OtherModal2.vue  
    <template>
      <OtherModalWrapper>
    		...
      </OtherModalWrapper>
    </template>

通过这种约定的方式，可以避免一些问题，但假如真的有人想捣乱怎么办？

![1d1688e1d0e103dda7fb678c709ff4a7.png][] image.png

别着急，有办法的。

### 借助stylelint ###

思路是这样的，每类别的远程组件是单独有对应的主文件夹，可以为这个文件夹定义最高和最小可允许的z-index，那该怎么做呢？

不知道大家有使用过自动加-webkit等前缀的插件 - autoprefixer没有，它其实是基于一款postcss工具做的。而我们经常用作css校验格式的工具stylelint也是基于它开发的。

这时候我们想到，能不能通过stylelint的能力，进行约束呢，我们发现找了官方文档并没有我们想要的API。

我们需要自己开发一个stylelint插件，来看看一个基本的stylelint插件的插件。

![e323030583ab74b04951ebcab8f52af4.png][]

stylelint通过stylelint.createPlugin方法，接受一个函数，返回一个函数。

const stylelint = require('stylelint');
    const ruleName = 'plugin/z-index-range-plugin';
    
    function rule(options) {
      // options传入的配置
      return (cssRoot, result) => {
        // cssRoot即为postcss对象
       };
    }
    
    module.exports = stylelint.createPlugin(
      ruleName,
      rule
    );

函数中可以拿到PostCSS对象，可以利用PostCSS对代码进行解析成AST、遍历、修改、AST变代码等操作。

有一些我们可用的概念。

*  rule，选择器，比如.class \{ z-index: 99 \}。
 *  decl，属性，比如z-index: 99。

我们需要检查z-index的值，因此需要遍历CSS检查z-index。我们可以调用cssRoot.walkDecls对做遍历：

// 遍历
    cssRoot.walkDecls((decl) => {
      // 获取属性定义
      if (decl) { 
        // ... 
      } 
    });

前置基础知识差不多够用了。

![d798f323cac017b8ce9c475f2c0fa721.png][] image.png

假如我们要检测一个两个文件夹下的.css文件的z-index是否合乎规矩。

我们设置好两个模块stylelint配置文件下的z-index范围。

这里我们可以看到stylelint配置文件，两个css文件。

├── .stylelintrc.js
    ├── module1
    │   └── index.css
    ├── module2
    │   └── index2.css

**stylelint配置文件**

// .stylelintrc.js
    module.exports = {
      "extends": "stylelint-config-standard",
      // 自定义插件
      "plugins": ["./plugin.js"],
      "rules": {
        // 自定义插件的规则
        "plugin/z-index-range-plugin": {
          // 设置的范围，保证各模块不重复
          "module1": [100, 199],
          "module2": [200, 299]
        }
      }
    }

**CSS测试文件**

/* module1/index.css */
    .classA {
      color: red;
      width: 99px;
      height: 100px;
      z-index: 99;
    }
    
    /* module2/index.css */
    .classB {
        color: red;
        width: 99px;
        height: 100px;
        z-index: 200;
    }

我们要达到的目的是，运行如下命令，会让module1/index.css报错，说z-index小于预期。

npx stylelint "*/index.css"

于是乎我们完成了如下代码，达成了预期目的。

const stylelint = require('stylelint');
    const ruleName = 'plugin/z-index-range-plugin';
    
    function ruleFn(options) {
      return function (cssRoot, result) {
    
        cssRoot.walkDecls('z-index', function (decl) {
          // 遍历路径
          const path = decl.source.input.file
          // 提取文件路径里的模块信息
          const match = path.match(/module\d/)
          // 获取文件夹
          const folder = match?.[0]
          // 获取z-index的值
          const value = Number(decl.value);
          // 获取设定的最大值、最小值
          const params = {
            min: options?.[folder]?.[0],
            max: options?.[folder]?.[1],
          }
    
          if (params.max && Math.abs(value) > params.max) {
            // 调用 stylelint 提供的report方法给出报错提示
            stylelint.utils.report({
              ruleName,
              result,
              node: decl,
              message: `Expected z-index to have maximum value of ${params.max}.`
            });
          }
    
          if (params.min && Math.abs(value) < params.min) {
            // 调用 stylelint 提供的report方法给出报错提示
            stylelint.utils.report({
              ruleName,
              result,
              node: decl,
              message: `Expected z-index to have minimum value of ${params.min}.`
            });
          }
        });
      };
    }
    
    module.exports = stylelint.createPlugin(
      ruleName,
      ruleFn
    );
    
    module.exports.ruleName = ruleName;

可以尝试项目：https://github.com/fly0o0/stylelint-plugin-zindex，试一试感受一下????。

这样基本一个远程弹层的设计就完成了。

但还是遇到了些问题，艰难????。

![7ce9506cac7693f38ef980a844f50b70.png][] image.png

# ○ 遇到的问题 #

我们兴冲冲的打算发上线了，结果报错了????。报的错是webpackJsonp不是一个function。

不要慌，先吃个瓜镇静镇静。webpackJsonp是做什么的呢？

## 异步加载的例子 ##

先看下以下例子，通过import的按需异步加载特性加载了test.js，以下例子基于Webpack3构建。

// 异步加载 test.js
    import('./test').then((say) => {
      say();
    });

然后生成了异步加载文件 0.bundle.js。

// 异步加载的文件，0.bundle.js
    webpackJsonp(
      // 在其它文件中存放着的模块的 ID
      [0],
      // 本文件所包含的模块
      [
        // test.js 所对应的模块
        (function (module, exports) {
          function ;(content) {
            console.log('i am test')
          }
    
          module.exports = say;
        })
      ]
    );

和执行入口文件 bundle.js。

// 执行入口文件，bundle.js
    (function (modules) {
      /***
       * webpackJsonp 用于从异步加载的文件中安装模块。
       *
       */
      window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
        var moduleId, chunkId, i = 0, resolves = [], result;
        for (; i < chunkIds.length; i++) {
          chunkId = chunkIds[i];
          if (installedChunks[chunkId]) {
            resolves.push(installedChunks[chunkId][0]);
          }
          installedChunks[chunkId] = 0;
        }
        for (moduleId in moreModules) {
          if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
            modules[moduleId] = moreModules[moduleId];
          }
        }
        while (resolves.length) {
          resolves.shift()();
        }
      };
    
      // 模拟 require 语句
      function __webpack_require__(moduleId) {
      }
    
      /**
       * 用于加载被分割出去的，需要异步加载的 Chunk 对应的文件
       */
      __webpack_require__.e = function requireEnsure(chunkId) {
        // ... 省略代码
        return promise;
      };
    
      return __webpack_require__(__webpack_require__.s = 0);
    })
    (
      [
        // main.js 对应的模块
        (function (module, exports, __webpack_require__) {
          // 通过 __webpack_require__.e 去异步加载 show.js 对应的 Chunk
          __webpack_require__.e(0).then(__webpack_require__.bind(null, 1)).then((show) => {
            // 执行 show 函数
            show('Webpack');
          });
        })
      ]
    );

可以看出webpackJsonp的作用是加载异步模块文件。但为什么会报webpackJsonp不是一个函数呢？

## 开始排查问题 ##

我们开始检查构建出的源码，发现我们的webpackJsonp并不是一个函数，而是一个数组（现已知Webpack4，当时排查时候不知道）。

我们发现异步文件加载的时候确实是变成了数组，通过push去增加一个异步模块到系统里。

// 异步加载的文件
    
    (window["webpackJsonp"] = window["webpackJsonp"] || []).push([[/* chunk id */ 0], {
      "./src/async.js": (function(module, __webpack_exports__, __webpack_require__) {
    
     //...
    
    }))

且在执行入口文件也发现了webpackJsonp被定义为了数组。

// 执行入口文件，bundle.js中的核心代码  
    
    var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
    var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
    jsonpArray.push = webpackJsonpCallback;
    jsonpArray = jsonpArray.slice();
    for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
    var parentJsonpFunction = oldJsonpFunction;

确实我们构建出的源码的webpackJsonp是一个数组，确实不是一个函数了，感觉找到了一点线索。但为什么会webpackJsonp会函数形式去使用呢？

我们怀疑报错处有问题，开始排查报错处，发现对应的文件确实是用webpackJsonp当作函数去调用的，这是什么情况？????️

这时我们注意到报错的都是老架构下的远程组件，是不是在老架构的项目里会有什么蛛丝马迹？

我们开始探索老架构，这时候发现老架构是使用的webpack3，而我们新架构是使用webpack4构建的。难道是这里出了问题？????

于是我们用webpack3重新构建了下老架构的远程组件，发现webpackJsonp对应的确实是函数，如上一节“异步加载的例子”里所示。

所以定位到了原因，webpack4和webpack3分别构建了新老两种的异步远程组件，webpackJsonp在版本4下是数组，而在版本3下面是函数。

![6cd92f20f14072ebcbaa062129a45030.png][]

细心的同学可能已经发现上面的图在之前出现过，webpack4构建的入口文件去加载webpack3构建的异步组件，就出现了章节头出现的webpackJsonp不是函数的错误。

![7db01b41b2cd9d929a568fad733f3f04.png][] image.png

好好想一想，大概有几个方案。

1.  批量去修改webpack3构建出来的异步组件中webpackJsonp的命名，然后在容器页面入口里自定义异步加载能力（webpackJsonp功能）的函数。
2.  重新去用webpack4构建所有遗留的老架构webpack3构建出来的异步组件。
3.  搜寻是否有官方支持，毕竟这是一个webpack4从webpack3的过来的breack changes。

第一个方案工作量有点大，且怎么保证异步组件和入口文件同步修改完毕呢？第二个方案工作量也很大，对于所有老架构的异步组件都得更新，且更新后的可靠性堪忧，万一有遗漏。第三个方案看起来是最靠谱的。

![d38747af04a513cfcb5785ad04b24138.png][]

于是在第三个方案的方向下，开始做了搜寻。

我们通过webpack4源码全局搜寻webpackJsonp，发现了jsonpFunction。通过官方文档找到了jsonpFunction是可以自定义webpack4的webpackJsonp的名称。比如可以改成如下。

output: {
      // 自定义名称
      jsonpFunction: 'webpack4JsonpIsArray'
    },

这样后，webpackJsonp就不是一个数组了，而是未定义了。因此我们需要在我们的公共代码库里提供webpackJsonp函数版本的定义。如异步加载的例子小节所提到的。

// webpackJsonp函数版
    !(function (n) {
      window.webpackJsonp = function (t, u, i) {
      //... 
      }
    }([]))

以此来提供入口页面能加载webpack3构建的异步文件的能力。

# ○ 演进 #

> 我们还对远程组件弹层做了一些演进，由于跟本文关联度不大，只做一些简单介绍。

**图片压缩问题**

券弹层的券有PNG、JPG、GIF格式，需要更快的展现速度，因此我们做了图片压缩的统一服务。

![56c770da7cdb7bf2f8bae6bf12d30f02.png][] image.png

gif处理策略：https://github.com/kornelski/giflossypng处理策略：https://pngquant.org

**效率问题**

有规律的远程组件，可通过搭建工具处理，因此我们构建了可视化低代码建站工具，有感兴趣的同学留言，我考虑写一篇???? 。

![015a0ab3526089493207db5709470a5b.png][] image.png

[![5c63b9ae3c95d3103b11d02caf233a1e.png][]][5c63b9ae3c95d3103b11d02caf233a1e.png 1]

## 关于奇舞团 ##

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![3a68300592abb1e7e3a0b6f5a90f5ff7.png][]

[ee5bab34cf86f76c86f0802168a7ad69.png]: /images/20220829/becf50ae38324f18af26356957f865b2.png
[30cd1bd49afe6571d458a97cc6f0279b.png]: /images/20220829/490b424389464f6a85e4a650d74497ab.png
[43fde709289997f24804e0f7bfcdeade.png]: /images/20220829/e70d313d729b4e02af3f577bdaeb8901.png
[e8d4130b3e1a8ebe805cd7dcb26e259d.png]: /images/20220829/2850c3d9a0c748ac994ca2128a0b099a.png
[8621bad6e841e6e1408db6cd79e7c062.png]: /images/20220829/5c4b7b78bf78447bbe3c435cdfa7c794.png
[d488be84a7b0bf130602efa208a8e300.png]: /images/20220829/070ecc9027b540a7ad600d9e32094ced.png
[642938a84c75deb9836062f12fb66227.png]: /images/20220829/778c9ddb7a0e463b85664482a5567994.png
[52f940beaabf7a3abf422bd005f352af.png]: /images/20220829/9e7cb205941043329a9bd4ba10fad841.png
[34986838e940bb8e4aa88939a73ce5bf.png]: /images/20220829/5c6dc6a6de5942abbee656ed45f11d3b.png
[8f9b33d81e9a1fe5db32942fb304baeb.png]: /images/20220829/5f013593f9424b96aaac3d4b4f24eb62.png
[0bbd30bc789366a7c99d0ade41bdb20f.png]: /images/20220829/e059a2729e724ebbbd1d141ee05fb66f.png
[5d4c6b12c672192b06f136260d492598.png]: /images/20220829/a80e2eb63a4b4d28b1d4679d58733d23.png
[1976b95a1a120e20264b49bb8fca64de.png]: /images/20220829/ade63326dbee440b8bed6382c5b4167c.png
[fa7f86f46ab93b815dd54dcd040fc535.png]: /images/20220829/596932d4eff64378a64cc5b46de08e92.png
[ec33ff2d5ecbec3f328b831c58abc158.png]: /images/20220829/22d5e17f670a4e4fa0d89a272f09d7ee.png
[a465bfae9d8f202b1e1dd6f707eed95e.png]: /images/20220829/4991d553c1a64e75a896fb12388113e9.png
[5e6d1389635547ca6a7a9275d73a7f82.png]: /images/20220829/d9e1abd29cc744b68f24e78a820a6fe0.png
[c5a96767b46073ee36531884395b3c0e.png]: /images/20220829/67c2211c68424a109ff68cd7bd8f61a5.png
[efdc97ff14550623c0a7e317f954f394.png]: /images/20220829/3abca9eb01644facb430e277f868f9a2.png
[eb928c53b33355bfc65065060ad467e9.png]: /images/20220829/ace35ad70a014387ac73896f6682e8b6.png
[dc69aee293f1c468d727d84b50181204.png]: /images/20220829/ea17e43f27d54fcb869b51193f4fd302.png
[4c7be20d05aab11e635e47a955c92edc.png]: /images/20220829/d54a3581fd1745cba591ed30d93b9a68.png
[d0c20b08c14dd21d46b8752c2e55503d.png]: /images/20220829/02331b24cb2f4fecb0c6f79b55c9968c.png
[3d4a345772442f062a5d81cbe006fd2f.png]: /images/20220829/6a5cf369462648aa99418fe3e6d52270.png
[8ad526c34e19c2672c7aedec59fb5932.png]: /images/20220829/c28b2ab1239944038f2d82725368b726.png
[89ddf0dc66dc9e0875d8e1fff31091e3.png]: /images/20220829/4f29a23a0cf944c88899eff9af022c63.png
[397d67790342fa0080d85e6283d0ddea.png]: /images/20220829/b6dd8f93950346bb94864e13d4e29f29.png
[3278123d89fdf8f9eee041c140e32cb5.png]: /images/20220829/0d53eb03aa4d437e810ddba76fb89914.png
[cc89d7c0b04b55d3d632ce87a40f5e83.png]: /images/20220829/0097627ea13f49d09a025fc7b72bbf15.png
[1d1688e1d0e103dda7fb678c709ff4a7.png]: /images/20220829/6898e28736c04a599de12e1ba58cc73d.png
[e323030583ab74b04951ebcab8f52af4.png]: /images/20220829/71267b3644004db4adbf1ffcbeb99c8c.png
[d798f323cac017b8ce9c475f2c0fa721.png]: /images/20220829/33e612b8d5f74b209bfc5da7ef050d97.png
[7ce9506cac7693f38ef980a844f50b70.png]: /images/20220829/160e81b8eff3496eb42fff735d62d503.png
[6cd92f20f14072ebcbaa062129a45030.png]: /images/20220829/cfc0226cf2974d3888c204a7e6d0d67f.png
[7db01b41b2cd9d929a568fad733f3f04.png]: /images/20220829/d0178f44a5e04b0d89ce5c2db493271b.png
[d38747af04a513cfcb5785ad04b24138.png]: /images/20220829/be37ead9766840248ca940c5c50bbb51.png
[56c770da7cdb7bf2f8bae6bf12d30f02.png]: /images/20220829/ebccb1ba4e4b4981be322b3e2453a40f.png
[015a0ab3526089493207db5709470a5b.png]: /images/20220829/d7f24bc31ad34e15a84c75933951065f.png
[5c63b9ae3c95d3103b11d02caf233a1e.png]: /images/20220829/0a51100d0db5453a96b8dda6fcea3864.png
[5c63b9ae3c95d3103b11d02caf233a1e.png 1]: http://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw%3D%3D&chksm=cf61d698f8165f8e2b7f6cf4a638347c3b55b035e6c2095e477b217723cce34acbbe943ad537&idx=1&mid=2247496626&scene=21&sn=699dc2b117d43674b9e80a616199d5b6#wechat_redirect
[3a68300592abb1e7e3a0b6f5a90f5ff7.png]: /images/20220829/b85c83bff6bc44d1b30c79390b27f211.png