前端懒加载原来こんなに楽しめるの？
遅延読み込みは、ウェブページのパフォーマンスを最適化するための技術であり、必要な時にのみリソースを読み込むことで、ページの読み込み速度とユーザー体験を向上させることができます。遅延読み込みは、画像、ビデオ、音声、コンポーネント、ルートなど、さまざまなシナリオで使用されます。本文では、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 という 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 で画像とルートの遅延読み込みを実装する方法と、いくつかのコード例を紹介しました。遅延読み込みは、必要な時にのみリソースを読み込むことで、ページの読み込み速度とユーザー体験を向上させるための技術です。