异步组件

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

回顾：

• 项目的打包： 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 中的组件上，它的名称为：异步组件
• 如果用在路由上，它的名称为：路由的懒加载