vue中的异步组件和v-if有什么不同？

Question

对于v-if来说，可以用它来控制组件的生成和销毁，那么对于父子模块来说，如果我想要让子组件满足一定条件下再进行创建，可以使用v-if的方式，通过日志可以发现，子组件只有在condition为true的时候才会加载
父组件中

<Content/>
<div v-if="condition">
  <Child/>
</div>

import Child from './Child'
components: {
    Child
}

那么，我看网上帖子，对于异步组件，为什么还要使用动态导入的方式做进一步处理呢？
vue2

<Content/>
<div v-if="condition">
  <Child/>
</div>

components: {
    Child: () => import("./Child")
}

这两种方式有什么区别吗？它们实现的效果不都是父组件先加载Content组件，当condition为true的时候，再去加载Child组件吗?

参考链接
异步组件
vue官方文档-异步组件

Answer 1

虽然可能两者都满足了你的业务需求，但他们从概念上就是不同的，就好比苹果和走路一样，虽然可以在走路的时候吃苹果，但他俩不是一个概念，没有可比性

异步组件也是组件，与寻常组件不同的是，他单独打包成一个js，在组件加载的时候才会去加载这个js文件，这个过程是异步的，等js加载完成才会去渲染这个组件

v-if是一个指令，你可以当成if语句去看

Answer 2

如果是vuecli项目

• 找到package.json，在build命令后面增加 --report

"scripts": {
   "build": "vue-cli-service build --report"
},

• 运行build命令，两条都可以

npm run build

• 在dist文件夹下面会生成report.html文件，直接双击打开即可在线查看打包之后的文件大小占比
• 左侧展开侧边栏，可以搜索相应的模块

Answer 3

Dynamic import 的优点是可以用于拆包 split chunks，达到按需下载的目的。

假设你整个项目大小为 2M，入口文件 1M，Child 文件 1M。那么在 condition 为 true 之前只需要下载入口文件 1M，一旦条件为真，才会开始下载剩余的 1M Child 文件。