vue 组件延时加载_为什么以及如何延迟加载角组件

vue 组件延时加载

“Before software can be reusable it first has to be usable.”

“在软件可重用之前，首先必须要可用。”

— Ralph Johnson

—拉尔夫·约翰逊

Lazy loading, by definition, is the technique of loading something on demand.

根据定义，延迟加载是按需加载某些内容的技术。

Lazy loading can be applied to different levels of your application-development process, from modules to components. Module-level lazy loading is quite famous in the Angular world, but component-level lazy loading is something less spoken about. In this article, we’ll create an accordion component and lazy load the content.

延迟加载可以应用于从模块到组件的应用程序开发过程的不同级别。 模块级的延迟加载在Angular世界中非常有名，但是组件级的延迟加载却很少有人谈论。 在本文中，我们将创建一个手风琴组件并延迟加载内容。

为什么要全部使用Lazyload组件？ (Why Lazyload Components at All?)

Photo by Dave Willhite on Unsplash

Dave Willhite在 Unsplash上 拍摄的照片

So you’ve published your production-ready Angular application!

因此，您已经发布了可用于生产的Angular应用程序！

You made sure to use best practices while writing the code, reusing components, lazyloading modules, and whatnot. After weeks of live usage, users have started complaining about application performance — specifically, about the initial loading time of some pages. For this reason, you started losing users, and the statistics keep coming down.

您确保在编写代码，重用组件，延迟加载模块等等时使用最佳实践。 经过数周的现场使用，用户开始抱怨应用程序性能-特别是某些页面的初始加载时间。 因此，您开始失去用户，并且统计数据不断下降。

You did a round of analysis and found you have a component that’s making multiple API calls that aren’t necessary (or less important) for the initial user experience. It can be a modal, an accordion, or even a slider. This particular API call is slowing down your application and making user experience sluggish.

您进行了一轮分析，发现您有一个组件正在进行多个API调用，这些调用对于初始用户体验不是必需的(或不太重要)。 它可以是模式乐曲，手风琴甚至是滑块。 此特定的API调用减慢了您的应用程序的速度，并使用户体验缓慢。

The better approach here (taking the accordion as the example) clearly would be to load content inside the accordion only when the user opens the particular accordion.

此处更好的方法(以手