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"));
},
},
}),