واکشی اولیه در برنامه create-react-app با Quicklink

Addy Osmani

Anton Karlovskiy

Demián Renzulli

این کد لبه به شما نشان می دهد که چگونه می توانید کتابخانه Quicklink را در نسخه ی نمایشی React SPA پیاده سازی کنید تا نشان دهد که چگونه واکشی اولیه چگونه پیمایش های بعدی را سرعت می بخشد.

اندازه گیری کنید

قبل از افزودن بهینه سازی، همیشه ایده خوبی است که ابتدا وضعیت فعلی برنامه را تجزیه و تحلیل کنید.

• روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.
• برای پیش نمایش سایت، View App را فشار دهید. سپس تمام صفحه را فشار دهید .

این وب سایت یک نسخه آزمایشی ساده است که با برنامه create-react-app ساخته شده است.

دستورالعمل های زیر را در برگه جدیدی که به تازگی باز شده است کامل کنید:

1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
2. روی تب Network کلیک کنید.
3. چک باکس Disable cache را انتخاب کنید.
4. در لیست کشویی Throttling ، Fast 3G را برای شبیه سازی یک نوع اتصال کند انتخاب کنید.
5. برنامه را دوباره بارگیری کنید.
6. chunk در کادر متنی Filter تایپ کنید تا منابعی که شامل chunk در نام آنها نیست پنهان شود.

این سایت از تقسیم کد مبتنی بر مسیر استفاده می کند که به لطف آن فقط کد لازم در ابتدا درخواست می شود.

1. درخواست های شبکه را در DevTools پاک کنید .
2. در داخل برنامه، روی پیوند وبلاگ کلیک کنید تا به آن صفحه بروید.

تکه‌های JS و CSS برای مسیر جدید برای نمایش صفحه بارگیری می‌شوند.

در مرحله بعد، Quicklink را در این سایت پیاده سازی خواهید کرد، به طوری که این تکه ها را می توان از قبل در صفحه اصلی واکشی کرد و ناوبری را سریعتر کرد.

این به شما امکان می دهد بهترین های هر دو تکنیک را ترکیب کنید:

• تقسیم کد مبتنی بر مسیر به مرورگر می‌گوید که تنها تکه‌های لازم را با اولویت بالاتر در زمان بارگذاری صفحه بارگیری کند.
• واکشی اولیه به مرورگر می‌گوید که تکه‌های پیوندهای داخل درگاه را در کمترین اولویت، در زمان بی‌کار بودن مرورگر، بارگیری کند.

پیکربندی webpack-route-manifest

اولین قدم نصب و پیکربندی webpack-route-manifest است، یک افزونه webpack که به شما امکان می‌دهد یک فایل مانیفست ایجاد کنید که مسیرها را با تکه‌های مربوطه مرتبط می‌کند.

معمولاً باید کتابخانه را نصب کنید، اما ما قبلاً این کار را برای شما انجام داده‌ایم. این دستوری است که باید اجرا کنید:

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

config-overrides.js فایلی است که در دایرکتوری ریشه پروژه شما قرار می گیرد و می توانید رفتار موجود پیکربندی بسته وب را بدون نیاز به خارج کردن پروژه لغو کنید.

• برای مشاهده منبع، View Source را فشار دهید.

config-overrides.js را برای ویرایش باز کنید و وابستگی webpack-route-manifest را در ابتدای فایل اضافه کنید:

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

سپس، با افزودن کد زیر به پایین config-overrides.js افزونه webpack-route-manifest را پیکربندی کنید:

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;
};

کد جدید موارد زیر را انجام می دهد:

• config.resolve متغیرها را با مسیرهای داخلی به صفحات، دارایی ها و مؤلفه ها اعلام می کند.
• config.plugins.push() یک شی RouteManifest ایجاد می کند و پیکربندی را به آن ارسال می کند تا فایل rmanifest.json بر اساس مسیرها و تکه های سایت تولید شود.

فایل manifest.json در https://site_url/rmanifest.json ایجاد و در دسترس قرار خواهد گرفت.

پیوند سریع را پیکربندی کنید

در این مرحله باید کتابخانه Quicklink را در پروژه خود نصب کنید. برای سادگی، قبلاً آن را به پروژه اضافه کردیم. این دستوری است که باید اجرا کنید:

npm install --save quicklink

src/components/App/index.js را برای ویرایش باز کنید.

ابتدا کامپوننت مرتبه بالاتر Quicklink (HOC) را وارد کنید:

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'));

بعد، یک شی options بعد از اعلان متغیر Blog ایجاد کنید تا در هنگام فراخوانی quicklink از آن به عنوان آرگومان استفاده کنید:

const options = {
    origins: []
};

در نهایت، هر مسیر را با کامپوننت مرتبه بالاتر withQuicklink() بپیچید و یک پارامتر options و مولفه هدف برای آن مسیر را به آن ارسال کنید:

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>
);

کد قبلی دستور واکشی اولیه تکه‌ها را برای مسیرهای پیچیده شده با withQuicklink() می‌دهد، زمانی که پیوند به نمای ظاهر می‌شود.

دوباره اندازه گیری کن

6 مرحله اول را از Measure تکرار کنید. هنوز به صفحه وبلاگ نروید.

هنگامی که صفحه اصلی بارگذاری می شود، تکه های آن مسیر بارگیری می شوند. پس از آن، Quicklink تکه های مسیر را برای پیوندهای in-viewport از پیش واکشی می کند:

این تکه ها با کمترین اولویت و بدون مسدود کردن صفحه درخواست می شوند.

بعدی:

1. دوباره گزارش شبکه را پاک کنید.
2. چک باکس Disable cache را غیرفعال کنید.
3. برای رفتن به آن صفحه روی لینک وبلاگ کلیک کنید.

ستون Size نشان می‌دهد که این تکه‌ها به‌جای شبکه، از «کش پیش واکشی» بازیابی شده‌اند. بارگیری این تکه‌ها بدون Quicklink تقریباً 580 میلی‌ثانیه طول کشید. با استفاده از کتابخانه اکنون 2 میلی ثانیه طول می کشد که نشان دهنده کاهش 99 درصدی است!