Vue 中的异步 Components 和异步路由
什么是异步 Components?
在 Vue 中，我们可以使用 Vue.component 注册组件，类似于这样：
Vue.component('my-component', {
// options
})当我们渲染这个组件时，它会直接被加载到页面中，即使它可能一开始并不会被用到。
但是，在某些情况下，我们可能希望将组件的加载延迟到真正需要它的时候，以提高页面性能和加载速度。这个时候，就可以使用异步组件了。
简单来说，异步组件是在组件需要被渲染时才会被加载的组件。
如何使用异步 Components?
Vue 在 2.3.0 版本以上为我们提供了一个 Vue.component 的异步方式，可以通过 Vue.component('my-component', () => import('./my-async-component.vue')) 来进行异步加载。
Vue.component('my-component', () => import('./my-async-component.vue'))上面的代码中，我们使用了动态 import 的方式引入了一个 Vue SFC 组件，并将其作为异步组件注册了。
当我们需要渲染这个组件时，Vue 会自动异步加载它。
什么是异步路由?
类似于异步组件，Vue 也支持异步路由。
Vue 路由系统是一个非常强大的工具，它通过路由匹配可以让我们在不同的页面之间进行无缝切换，实现了单页应用（SPA）的核心功能。
但是，在 SPA 应用中，通常存在许多个页面，如果一开始就将所有的页面组件都加载到浏览器中，会增加很大的页面加载时间，影响用户体验。
异步路由可以解决这个问题。
异步路由是将路由对象的组件定义延迟到路由被访问时，以加快应用的初始加载速度的方法。
如何使用异步路由?
在 Vue 中，我们可以通过 import 来引入路由组件。
import Home from './views/Home.vue' import About from './views/About.vue' import Login from './views/Login.vue'
这将导致应用一开始就加载所有组件，我们可以将其改为异步组件的方式来优化页面加载速度。
const Home = () => import('./views/Home.vue')
const About = () => import('./views/About.vue')
const Login = () => import('./views/Login.vue')使用异步路由，我们可以按需加载组件，在需要的时候再去加载页面，这样可以大大提高页面的加载速度。
示例代码
下面是一个实现了异步组件和异步路由的示例代码：
-- -------------------- ---- -------
----- --- - -- -- -------------------
----- --- - -- -- -------------------
----- ------ - --- -----------
------- -
- ----- ------- ---------- --- --
- ----- ------- ---------- --- -
-
--
----------------------------- -- -- -----------------------------------
--- -----
-------
--- ------
--这个示例代码中，我们使用了 import 的方式加载了异步组件和异步路由组件，并通过 VueRouter 来实现了路由的功能。
总结
异步 Components 和异步路由是 Vue 中的两个重要概念，它们可以帮助我们优化页面的加载速度，提高用户体验。
在实际开发中，我们可以根据实际情况来选择是否要使用异步组件和异步路由，并通过这些技术来提高页面性能、加速页面加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64790a92968c7c53b051e48d