Quicklink ile create-react-app uygulamasında önceden getirme

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Bu codelab'de, önceden getirmenin sonraki gezinmeleri nasıl hızlandırdığını göstermek için bir React SPA demosunda Quicklink kitaplığını nasıl uygulayacağınız gösterilmektedir.

Ölçüm

Optimizasyonları eklemeden önce, ilk olarak uygulamanın mevcut durumunu analiz etmek her zaman iyi bir fikirdir.

• Projeyi düzenlenebilir hale getirmek için Düzenlenecek remiks'i tıklayın.
• Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a basın.

Web sitesi, create-react-app ile oluşturulmuş basit bir demodur.

Yeni açılan sekmede aşağıdaki talimatları uygulayın:

1. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
2. Ağ sekmesini tıklayın.
3. Önbelleği devre dışı bırak onay kutusunu seçin.
4. Kısıtlama açılır listesinde, yavaş bağlantı türü simüle etmek için Hızlı 3G'yi seçin.
5. Uygulamayı yeniden yükleyin.
6. Adlarında chunk içermeyen kaynakları gizlemek için Filtre metin kutusuna chunk yazın.

Site, başlangıçta yalnızca gerekli kodun istendiği rota tabanlı kod bölme kullanmaktadır.

1. Geliştirici Araçları'nda ağ isteklerini temizleyin.
2. Söz konusu sayfaya gitmek için uygulamada Blog bağlantısını tıklayın.

Yeni rotanın JS ve CSS parçaları, sayfayı oluşturmak için yüklenir.

Ardından, bu parçalar ana sayfada önceden getirilerek gezinmeyi hızlandıracak şekilde bu sitede Quicklink'i uygulayacaksınız.

Bu sayede her iki teknikin en iyi özelliklerini birleştirebilirsiniz:

• Rota tabanlı kod bölme, tarayıcının sayfa yükleme zamanında yalnızca gerekli parçaları daha yüksek öncelikte yüklemesini sağlar.
• Önceden getirme, tarayıcıya, boşta kalma süresi boyunca görüntü alanı içi bağlantılara ait parçaları en düşük öncelikte yüklemesini bildirir.

webpack-route-manifest ayarlarını yapılandır

İlk adım, rotaları ilgili parçalarla ilişkilendiren bir manifest dosyası oluşturmanıza olanak tanıyan bir web paketi eklentisi olan webpack-route-manifest'i yüklemek ve yapılandırmaktır.

Genellikle kitaplığı yüklemeniz gerekir, ancak biz bunu zaten sizin yerinize yaptık. Çalıştırmanız gereken komut şu şekildedir:

npm install webpack-route-manifest --save-dev

config-overrides.js, projenizin kök dizinine yerleştirilmiş bir dosyadır. Burada, projeyi çıkarmanıza gerek kalmadan web paketi yapılandırmasının mevcut davranışını geçersiz kılabilirsiniz.

• Kaynağı görüntülemek için Kaynağı Görüntüle'ye basın.

Düzenlemek için config-overrides.js dosyasını açın ve webpack-route-manifest bağımlılığını dosyanın başına ekleyin:

const path = require('path');
const RouteManifest = require('webpack-route-manifest');

Ardından, aşağıdaki kodu config-overrides.js öğesinin altına ekleyerek webpack-route-manifest eklentisini yapılandırın:

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: {
      '@assets': `${path.resolve(__dirname, 'src/assets')}`,
      '@pages': `${path.resolve(__dirname, 'src/pages')}`,
      '@components': `${path.resolve(__dirname, 'src/components')}`,
    },
  };

  config.plugins.push(
    new RouteManifest({
      minify: true,
      filename: 'rmanifest.json',
      routes(str) {
        let out = str.replace('@pages', '').toLowerCase();
        if (out === '/article') return '/blog/:title';
        if (out === '/home') return '/';
        return out;
      },
    }),
  );

  return config;
};

Yeni kod şunları yapar:

• config.resolve; sayfa, öğe ve bileşenlerin dahili yollarına sahip değişkenleri tanımlar.
• config.plugins.push(), RouteManifest nesnesi oluşturur ve bu nesneye yapılandırmayı iletir. Böylece rmanifest.json dosyası, sitenin rotalarına ve parçalarına göre oluşturulabilir.

manifest.json dosyası, https://site_url/rmanifest.json adresinde oluşturulacak ve kullanıma sunulacak.

Hızlı bağlantıyı yapılandır

Bu noktada, projenize Quicklink kitaplığını yüklemeniz gerekir. Kolaylık olması açısından bu bilgiyi projeye ekledik. Çalıştırmanız gereken komut şu şekildedir:

npm install --save quicklink

Düzenlemek için src/components/App/index.js uygulamasını açın.

Öncelikle Quicklink üst sipariş bileşenini (HOC) içe aktarın:

import React, { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';

import Footer from '@components/Footer';
import Hero from '@components/Hero';
import style from './index.module.css';
import { withQuicklink } from 'quicklink/dist/react/hoc.js';

const Home = lazy(() => import(/* webpackChunkName: "home" */ '@pages/Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ '@pages/About'));
const Article = lazy(() => import(/* webpackChunkName: "article" */ '@pages/Article'));
const Blog = lazy(() => import(/* webpackChunkName: "blog" */ '@pages/Blog'));

Ardından, quicklink çağrılırken bağımsız değişken olarak kullanmak için Blog değişken bildiriminden sonra bir options nesnesi oluşturun:

const options = {
    origins: []
};

Son olarak, her bir rotayı withQuicklink() üst düzey bileşenle sarmalayarak options parametresini ve söz konusu rotanın hedef bileşenini iletin:

const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading...</div>}>
        <Route path="/" exact component={withQuicklink(Home, options)} />
        <Route path="/blog" exact component={withQuicklink(Blog, options)} />
        <Route
          path="/blog/:title"
          component={withQuicklink(Article, options)}
        />
        <Route path="/about" exact component={withQuicklink(About, options)} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

Önceki kod, bağlantı görünüme girdiğinde withQuicklink() ile sarmalanmış rotalar için parçaları önceden getirme talimatı verir.

Tekrar ölçün

Ölçüm bölümündeki ilk 6 adımı tekrarlayın. Henüz blog sayfasına gitmeyin.

Ana sayfa yüklendiğinde söz konusu rotaya ait parçalar yüklenir. Bunun ardından Quicklink, görüntü alanı bağlantıları için rotanın parçalarını önceden getirir:

Bu parçalar, en düşük öncelikte ve sayfayı engellemeden istenir.

Sonraki:

1. Ağ günlüğünü tekrar temizleyin.
2. Önbelleği devre dışı bırak onay kutusunu devre dışı bırakın.
3. Bu sayfaya gitmek için Blog bağlantısını tıklayın.

Boyut sütunu, bu parçaların ağ yerine "önceden getirme önbelleğinden" alındığını belirtir. Bu parçaların Quicklink olmadan yüklenmesi yaklaşık 580 ms sürdü. Artık kitaplığın kullanılması 2 ms sürüyor. Bu da % 99 azalma anlamına geliyor!