webpack编译vue异步组件方式

helloworld.js

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    'my-component': () => import('./async.vue')
  }
}
</script>

async.js

<template>
  <div>test1112</div>
</template>

webpack编译后会对异步组件会生成单独chunk (chunk-2d0b66ba.b734e64c.js),记录生成vnode组件的过程：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([
  ["chunk-2d0b66ba"],
  {
    "1ca3": function (n, e, t) {
      "use strict";
      t.r(e);
      var c = function () {
          var n = this,
            e = n.$createElement,
            t = n._self._c || e;
          return t("div", [n._v("test1112")]);
        },
        u = [],
        a = t("2877"),
        l = {},
        s = Object(a["a"])(l, c, u, !1, null, null, null);
      e["default"] = s.exports;
    },
  },
]);

app.js 新建切换到这个组件时，新建script标签获取异步组件

 (i.e = function (e) {
    var n = [],
      t = o[e];
    if (0 !== t)
      if (t) n.push(t[2]);
      else {
        var r = new Promise(function (n, r) {
          t = o[e] = [n, r];
        });
        n.push((t[2] = r));
        var u,
          a = document.createElement("script");
        (a.charset = "utf-8"),
          (a.timeout = 120),
          i.nc && a.setAttribute("nonce", i.nc),
          (a.src = c(e));
        var l = new Error();
        u = function (n) {
          (a.onerror = a.onload = null), clearTimeout(s);
          var t = o[e];
          if (0 !== t) {
            if (t) {
              var r = n && ("load" === n.type ? "missing" : n.type),
                u = n && n.target && n.target.src;
              (l.message =
                "Loading chunk " + e + " failed.\n(" + r + ": " + u + ")"),
                (l.name = "ChunkLoadError"),
                (l.type = r),
                (l.request = u),
                t[1](l);
            }
            o[e] = void 0;
          }
        };
        var s = setTimeout(function () {
          u({ type: "timeout", target: a });
        }, 12e4);
        (a.onerror = a.onload = u), document.head.appendChild(a);
      }
    return Promise.all(n);
  })

   a =
        (t("d3b7"),
        t("3ca3"),
        t("ddb0"),
        {
          name: "HelloWorld",
          props: { msg: String },
          components: {
            "my-component": function () {
              return t.e("chunk-2d0b66ba").then(t.bind(null, "1ca3"));
            },
          },
        }),