前端懒加载原来こんなに楽しいの？
懒加载は、ウェブページのパフォーマンスを最適化するための技術であり、必要な時にのみリソースを読み込むことで、ページの読み込み速度とユーザーエクスペリエンスを向上させることができます。懒加载は、画像、ビデオ、オーディオ、コンポーネント、ルートなど、さまざまなシナリオで使用されます。この記事では、React と Vue で画像とルートの懒加载を実装する方法と、いくつかのコード例を紹介します。
画像の懒加载#
画像はウェブページで最も一般的なリソースの 1 つであり、帯域幅を最も多く使用するリソースの 1 つでもあります。すべての画像を一度に読み込むと、ページの初期表示に時間がかかり、ユーザーはイライラするかもしれません。一方、ユーザーが見える画像のみを読み込み、他の画像はユーザーがスクロールして表示されるまで遅延させると、帯域幅を節約し、ユーザーエクスペリエンスを向上させることができます。これが画像の懒加载の原理です。
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>
ルートの懒加载#
ルートはウェブページで最も一般的なナビゲーション方法の 1 つであり、異なるパスに基づいて異なるコンポーネントを表示することができます。しかし、すべてのルートコンポーネントを一度に読み込むと、ページの初期表示に時間がかかり、ユーザーはイライラするかもしれません。一方、ユーザーが現在アクセスしているルートコンポーネントのみを読み込み、他のルートコンポーネントは対応するリンクをクリックした時に遅延させると、帯域幅を節約し、ユーザーエクスペリエンスを向上させることができます。これがルートの懒加载の原理です。
React では、React.lazy と Suspense という 2 つの組み込み 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 で画像とルートの懒加载を実装する方法と、いくつかのコード例を紹介しました。懒加载は、必要な時にのみリソースを読み込むことで、ページの読み込み速度とユーザーエクスペリエンスを向上させるための技術です。