前端懒加载原来可以这样玩?

前端懒加载原来可以这样玩？

懒加载是一种优化网页性能的技术，它可以让我们在需要的时候才加载资源，从而提高页面的加载速度和用户体验。懒加载的应用场景很多，比如图片、视频、音频、组件、路由等。本文将介绍如何在 react 和 vue 中实现图片和路由的懒加载，并给出一些代码示例。

图片懒加载#

图片是网页中最常见的资源之一，也是最占用带宽的资源之一。如果我们一次性加载所有的图片，会导致页面的首屏加载时间过长，用户可能会感到不耐烦。而如果我们只加载用户可见的图片，而将其他图片延迟到用户滚动到它们的位置时再加载，就可以节省带宽和提高用户体验。这就是图片懒加载的原理。

在 react 中，我们可以使用 react-lazyload 这个第三方库来实现图片懒加载。它提供了一个 LazyLoad 组件，我们只需要将需要懒加载的图片放在 LazyLoad 组件中，并指定一个占位图，就可以实现图片懒加载的效果。例如：

import React from 'react';
import LazyLoad from 'react-lazyload';
import placeholder from './assets/placeholder.gif';

function App() {
return (
<div className="App">
<h1>React 图片懒加载示例</h1>
<div className="container">
<LazyLoad height={200} placeholder={<img src={placeholder} alt="占位图" />}>
<img src="https://picsum.photos/id/1/200/200" alt="图片1" />
</LazyLoad>
<LazyLoad height={200} placeholder={<img src={placeholder} alt="占位图" />}>
<img src="https://picsum.photos/id/2/200/200" alt="图片2" />
</LazyLoad>
<LazyLoad height={200} placeholder={<img src={placeholder} alt="占位图" />}>
<img src="https://picsum.photos/id/3/200/200" alt="图片3" />
</LazyLoad>
{/* 省略其他图片 */}
</div>
</div>
);
}

export default App;

在 vue 中，我们可以使用 vue-lazyload 这个第三方库来实现图片懒加载。它提供了一个 v-lazy 指令，我们只需要将需要懒加载的图片的 src 属性替换为 v-lazy，并指定一个占位图，就可以实现图片懒加载的效果。例如：

<template>
<div id="app">
<h1>Vue 图片懒加载示例</h1>
<div class="container">
<img v-lazy="'https://picsum.photos/id/1/200/200'" alt="图片1" />
<img v-lazy="'https://picsum.photos/id/2/200/200'" alt="图片2" />
<img v-lazy="'https://picsum.photos/id/3/200/200'" alt="图片3" />
<!-- 省略其他图片 -->
</div>
</div>
</template>

<script>
import Vue from 'vue';
import VueLazyload from 'vue-lazyload';

Vue.use(VueLazyload, {
loading: './assets/placeholder.gif', // 占位图
});

export default {
name: 'App',
};
</script>

<style>
.container {
display: flex;
flex-wrap: wrap;
}
</style>

路由懒加载#

路由是网页中最常见的导航方式之一，它可以让我们根据不同的路径来展示不同的组件。但是如果我们一次性加载所有的路由组件，会导致页面的首屏加载时间过长，用户可能会感到不耐烦。而如果我们只加载用户当前访问的路由组件，而将其他路由组件延迟到用户点击对应的链接时再加载，就可以节省带宽和提高用户体验。这就是路由懒加载的原理。

在 react 中，我们可以使用 React.lazy 和 Suspense 这两个内置的 API 来实现路由懒加载。React.lazy 可以让我们使用动态导入的语法来定义一个懒加载的组件，Suspense 可以让我们在懒加载的组件渲染之前展示一个 fallback 的内容。例如：

import React, { Suspense } from 'react';
import { BrowserRouter, Route, Switch, Link } from 'react-router-dom';

// 使用 React.lazy 定义懒加载的组件
const Home = React.lazy(() => import('./components/Home'));
const About = React.lazy(() => import('./components/About'));
const Contact = React.lazy(() => import('./components/Contact'));

function App() {
return (
<div className="App">
<h1>React 路由懒加载示例</h1>
<BrowserRouter>
<div className="nav">
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
<Link to="/contact">联系</Link>
</div>
{/* 使用 Suspense 包裹路由，并指定 fallback 的内容 */}
<Suspense fallback={<div>正在加载...</div>}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</Suspense>
</BrowserRouter>
</div>
);
}

export default App;

在 vue 中，我们可以使用动态导入的语法来实现路由懒加载。动态导入可以让我们在定义路由时，将路由组件作为一个函数返回，这样就可以实现按需加载的效果。例如：

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

Vue.use(Router);

// 使用动态导入定义路由组件
const Home = () => import('./components/Home.vue');
const About = () => import('./components/About.vue');
const Contact = () => import('./components/Contact.vue');

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

总结

本文介绍了如何在 react 和 vue 中实现图片和路由的懒加载，并给出了一些代码示例。懒加载是一种优化网页性能的技术，它可以让我们在需要的时候才加载资源，从而提高页面的加载速度和用户体验。