Location>code7788 >text

VUE series of performance optimization - lazy loading

Popularity：25 ℃/2024-07-23 10:33:45

I. Basic concepts of lazy loading

Lazy loading is an on-demand loading technique that loads the appropriate resources only when the user needs them, rather than loading all resources at once when the page is initially loaded. This reduces the amount of resources initially loaded on the page and improves the page loading speed and user experience.

Lazy loading in Vue

Lazy loading is mainly used for on-demand loading of routing components in Vue Router, which provides very convenient lazy loading support.

1. Routing lazy loading

In the traditional way, all routing components are loaded at once when the page is initialized, as shown below:

import Home from './components/';
import About from './components/';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

 

This approach can lead to long initial loading times when the page becomes complex and large. With lazy loading, components can be loaded on demand:

const Home = () => import('./components/');
const About = () => import('./components/');

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

 

In the above code, theimport() function returns a Promise object that loads the appropriate component when the route is accessed.

2. Component lazy loading

In addition to lazy loading of routes, Vue also supports lazy loading of components. For some large components, you can use asynchronous components for lazy loading:

('AsyncComponent', () => ({
  // Component to load (should be a `Promise` object)
component: import('./components/'),
  // Components that should be displayed in the load
loading: LoadingComponent, the
  // The component to display when loading fails
error: ErrorComponent, // the delay before displaying the loaded component (default value is 200ms)
  // The delay before displaying a loaded component (default value is 200ms).
delay: 200,
  // Delay for displaying the error component after a load failure
timeout: 3000
}));

 

III. Practical applications of lazy loading

To better understand the practical application of lazy loading, let's look at a concrete example. Suppose we have an e-commerce website with a home page, product detail page and shopping cart page. We want to load only the content of the home page when the user visits the home page, and load the corresponding components only when the user clicks into the product details page or shopping cart page.

First, set up the routing and lazy loading components:

import Vue from 'vue';
import VueRouter from 'vue-router';

(VueRouter);

const Home = () => import('./components/');
const ProductDetail = () => import('./components/');
const Cart = () => import('./components/');

const routes = [
  { path: '/', component: Home },
  { path: '/product/:id', component: ProductDetail },
  { path: '/cart', component: Cart }
];

const router = new VueRouter({
  routes
});

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

 

Lazy loading can then continue inside the component using an asynchronous component approach, such as in the component:

<template>
  <div>
    <h1>Product Detail</h1>
    <async-component></async-component>
  </div>
</template>

<script>
export default {
  components: {
    'async-component': () => import('./')
  }
};
</script>

 

IV. Notes on lazy loading

  1. Loading Placeholders: During lazy loading, load placeholder components (such as loading animations or hints) can be used in order to enhance the user experience.

  2. error handling: A friendly error message or retry mechanism should be provided in case of component loading failure.

  3. Optimize network requests: This can be combined with server-side support for HTTP/2, multiplexing, and other technologies to further optimize resource loading efficiency.

  4. SEO Impact: For pages that require SEO, consider using server-side rendering (SSR) or prerendering techniques to solve the SEO problems associated with lazy loading.

V. Summary

Lazy loading is a very effective front-end performance optimization technique, in which it is mainly implemented by routing lazy loading and component lazy loading. By loading resources on demand, it can significantly reduce the initial loading time of the page and improve the responsiveness of the page and user experience. In the actual project, according to the specific needs and scenarios, you can flexibly apply lazy loading technology and combine it with other optimization means to further improve the front-end performance.

 

<Previous Next>