动态组件与异步组件

动态组件

Vue.js 提供了一个特殊的元素 <component> 用来动态地挂载不同的组件,使用 is 属性可以来设置要挂载的组件

应用场景：

异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

• 项目的打包： npm run build
  • 项目根目录下生成一个 dist 文件夹
    • css：当前项目中所有打包后的样式文件
    • js：当前项目中所有打包后的 js 文件
      • app.js 所有 src 目录下内容打包后的结果
      • app.js.map：上面文件的映射文件
      • chunk.js：所有第三方包打包后的文件
      • chunk.js.map：上面文件的映射文件
    • index.html：项目的静态页面

问题：

• 表现：打包之后的项目，运行之后，会一口气将当前项目中所有的文件全部加载出来
• 影响：第一次加载页面时会非常慢，用户体验不好。
• 解决方案：
  • 可以使用异步组件来解决这个问题

用法：

• 同步组件：
  • 导入方式：

		import login from './login.vue'

• 特点：
  • 在打包时，会一并打包到 app.js 中
  • 请求页面时，会随着 app.js 一并请求出来
• 异步组件
  • 导入方式：

		 const login = () => import('./login.vue')

• 特点：
  • 在打包时，不会打包到 app.js 中，而是会单独打包为一个js 文件
  • 请求页面时，只要在请求到时，才会加载出来

注意点：

• 如果用 vue 中的组件上，它的名称为：异步组件
• 如果用在路由上，它的名称为：路由的懒加载