前端懶加載原來可以這樣玩？
懶加載是一種優化網頁性能的技術，它可以讓我們在需要的時候才加載資源，從而提高頁面的加載速度和用戶體驗。懶加載的應用場景很多，比如圖片、視頻、音頻、組件、路由等。本文將介紹如何在 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 中實現圖片和路由的懶加載，並給出了一些代碼示例。懶加載是一種優化網頁性能的技術，它可以讓我們在需要的時候才加載資源，從而提高頁面的加載速度和用戶體驗。