vue 组件异步加载方式(按需加载)

当项目中 Vue 组件过多时，一次性全部加载会使页面首次加载的速度变慢，也会使浏览器的性能变差。Vue 提供了一种按需加载组件的方式，也叫做组件的懒加载，可以有效提高页面的加载速度以及性能。下面是按需加载 Vue 组件的完整攻略。

1. 使用 Vue CLI 创建项目

Vue CLI 是官方提供的 Vue.js 项目脚手架工具，可以快捷构建 Vue 项目。

如果还没有安装 Vue CLI，使用下面命令进行全局安装：

npm install -g @vue/cli

然后通过以下命令创建一个新的 Vue 项目：

vue create my-vue-app

2. 使用 Vue Router 添加路由

Vue Router 是 Vue.js 官方提供的路由管理器，可以帮助我们在 Vue.js 应用中实现页面之间的切换和管理。

在创建的 Vue 项目中，运行以下命令去安装 Vue Router：

npm install vue-router --save

然后在 src 目录下创建一个新的 router 文件夹，并在其中创建 index.js 文件，以定义需要导航的路由。以下是一个简单的路由配置示例：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
  ]
})

在 main.js 文件中，将 router/index.js 引入到 Vue 实例中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

3. 使用 Vue Async Component 异步加载组件

Vue.js 2.3+ 版本提供了异步加载组件的方式，使用它可以大大减小文件大小、减小首屏加载时间。可以使用 Vue Async Component 方法来实现动态加载组件的目的。

首先，需要在需要使用动态组件的地方使用 Vue.component 方法定义组件，并返回一个 Promise，是返回一个组件实例的方法。以下是一个动态加载组件的示例：

Vue.component('my-component', resolve => {
  // webpack 的 `import()` 方法
  import('@/components/MyComponent.vue').then(resolve)
})

上面的示例中，使用 webpack 的 import() 方法动态加载组件，并返回组件实例。

4. 使用 Vue Router 和 Async Component 实现按需加载

将之前定义的路由组件都改为异步加载的方式，需要用到 Vue Async Component 和 Vue Router。在 router/index.js 文件中，将路由组件改为异步加载方式，将组件定义的方式替换为返回一个 import() 方法的路由组件描述对象：

import Vue from 'vue'
import Router from 'vue-router'
// 引入所有需要懒加载的组件
const Home = () => import('@/components/Home.vue')
const About = () => import('@/components/About.vue')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
  ]
})

上面的例子中，使用了 Dynamic Import Syntax，将组件从文件中异步加载到运行时中。

5. 使用 Webpack Chunking 进行按需加载

将组件分块是 Webpack 中实现按需加载的一种方法。Webpack 允许通过异步加载机制将代码分离为不同的块，也被称为 “代码切割（code splitting）”。这些块可以按照需要异步加载。在 Vue 项目中，可以使用 Wepback 的 动态导入 机制来分块。

例如重新定义 Home.vue 为如下方式：

<template>
  <div>
    <h1>Home Page</h1>
    <router-link :to="{path: '/about'}">Go to About page</router-link>
  </div>
</template>

<script>
export default {
  created: function () {
    const myComponent = () => import(/* webpackChunkName: "my-component" */ './MyComponent.vue')
    myComponent().then((c) => {
      console.log(c)
    })
  }
}
</script>

动态导入的方法是通过 import() 和注释 webpackChunkName 实现的，这里基于 Home.vue 所在的块名将一个组件打包为一个单独的块。

可以在使用方法的同时触发打包，具体执行命令可以使用以下方式进行触发：

npm run build && npm run serve

在上述操作过后，打开控制台可以看到只有访问 Home 页面才会触发 my-component 的异步加载，触发时间和页面加载时间可控制在一个低点。进入 About 页面时，可以看到 my-component 会被缓存并不会再次加载。

这样就可以实现按需加载组件，优化页面加载速度和性能。

综上，这是使用 Vue 实现组件异步加载的详细攻略。该方法不仅可以提高项目加载速度和用户体验，而且使代码更加灵活和模块化。