代码拆分由webpack，Rollup或Parcel等捆绑器处理，它们解析动态导入语法并为每个动态导入的模块创建单独的文件。稍后我们将在控制台的网络选项卡中看到这一点。但首先，我们来看看静态和动态导入之间的区别：
// static import
import Message from "./Message";// dynamic import
import("./Message").then(Message => {
// Message module is available here...
});
现在，让我们将这些知识应用到我们的
Message 组件中，我们将得到一个如下所示的组件：
App.vue
<!-- App.vue -->
<template>
<div>
<message></message>
</div>
</template><script>
import Message from "./Message";
export default {
components: {
Message: () => import("./Message")
}
};
</script>
如你所见，函数import()将解析返回组件的Promise，这意味着我们已成功异步加载组件。如果您查看
devtools 的
network 选项卡，您会注意到一个名为
0.js 包含异步组件的文件。
根据条件加载异步组件
现在我们已经掌握了异步组件，让我们仅在真正需要时加载它们。在本文的上一节中，我解释了仅在用户点击结帐按钮时才加载的结帐框的用例。让我们把它构建出来。
项目设置
如果您没有安装
vue/cli ，首先应该安装它：
npm i -g @vue/cli接下来，使用CLI创建新项目，在出现提示时选择默认预设即可：
vue create my-store转到项目目录，然后安装我们将用于样式的ant-design-vue库：
cd my-store
npm i ant-design-vue接下来，导入Ant设计库：
src/main.js
import 'ant-design-vue/dist/antd.css'最后我们在
src/comonents 里创建两个新组件
Checkout.vue 和
Items.vue ：
touch src/components/{Checkout.vue,Items.vue}写一个商店的视图层
