🎈 👲 🚳 相互作用パターンのインポート（パート1） 🧑🏼‍🤝‍🧑🏼 🏒 🧔🏾

オリジナルへのリンク

このパターンは、リソースの遅延読み込みで構成されます。つまり、ユーザーがインターフェイスの一部を必要とする場合のみです。

私たちのページには、現在必要のないデータやコンポーネントが含まれている可能性があります。たとえば、ユーザーがクリックするかスクロールしない限り、ユーザーには表示されないインターフェイスの一部にすることができます。

インターフェイスのこれらの部分は、ビデオプレーヤー、チャット、またはクリックで表示されるインターフェイスの一部にすることができます。

これらのリソースのアクティブなロードは、それらが非常に重い場合、メインスレッドをブロックし、ページと対話するまでの時間を増やす可能性があります。

これは、次のような指標に悪影響を与える可能性があります。

FID（最初の入力遅延）
TBT（合計ブロッキング時間）
TTI（Time To Interactive）

すべてのリソースをすぐにロードする代わりに、次のように、より適切なタイミングでリソースをロードできます。

ユーザーがコンポーネントを初めてクリックする
コンポーネントはビューポートにあります
または、ブラウザがアイドル状態になるまでコンポーネントのダウンロードを延期します（requestIdleCallbackを使用）

リソースをロードする方法に関するさまざまなオプション：

すぐに-スクリプトをロードする通常の方法
レイジー（ルーター用）-ユーザーがページにアクセスしたときにロードします
Lazy ( ) -
Lazy (viewport) -
Prefetch - , critical resources
Preload -

. Google Docs, 500:

- .

youtube :

android.com :

JavaScript SDK. .

Calibre app 30% " ". CSS HTML, .

Postmark , help , . 314 - . UX CSS + HTML , . TTI (Time To Interactive) 7.7 3.7 .

NE Digital react-scroll . , , 7.

handleScrollToTop() {
    import('react-scroll').then(scroll => {
      scroll.animateScroll.scrollToTop({
      })
    })
}

?

JS

Promise, .

, lodash.sortby, .

const btn = document.querySelector('button');

btn.addEventListener('click', e => {
  e.preventDefault();
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput()) // use the imported dependency
    .catch(err => { console.log(err) });
});

const loginBtn = document.querySelector('#login');

loginBtn.addEventListener('click', () => {
  const loader = new scriptLoader();
  loader.load([
      '//apis.google.com/js/client:platform.js?onload=showLoginScreen'
  ]).then(({length}) => {
      console.log(${length} scripts loaded!);
  });
});

React

, :

<MessageList>
<MessageInput>
<EmojiPicker> ( emoji-mart 98 - gzip')

, :

import MessageList from './MessageList';
import MessageInput from './MessageInput';
import EmojiPicker from './EmojiPicker';

const Channel = () => {
  ...
  return (
    <div>
      <MessageList />
      <MessageInput />
      {emojiPickerOpen && <EmojiPicker />}
    </div>
  );
};

code-splitting.

React.lazy code-splitting . React.lazy . Suspense , EmojiPicker:

import React, { lazy, Suspense } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';

const EmojiPicker = lazy(
  () => import('./EmojiPicker')
);
const Channel = () => {
  ...
  return (
    <div>
      <MessageList />
      <MessageInput />
      {emojiPickerOpen && (
        <Suspense fallback={<div>Loading...</div>}>
          <EmojiPicker />
        </Suspense>
      )}
    </div>
  );
};

EmojiPicker <MessageInput>, :

import React, { useState, createElement } from 'react';
import MessageList from './MessageList';
import MessageInput from './MessageInput';
import ErrorBoundary from './ErrorBoundary';

const Channel = () => {
  const [emojiPickerEl, setEmojiPickerEl] = useState(null);
  const openEmojiPicker = () => {
    import(/* webpackChunkName: "emoji-picker" */ './EmojiPicker')
      .then(module => module.default)
      .then(emojiPicker => {
        setEmojiPickerEl(createElement(emojiPicker));
      });
  };
  const closeEmojiPickerHandler = () => {
    setEmojiPickerEl(null);
  };
  return (
    <ErrorBoundary>
      <div>
        <MessageList />
        <MessageInput onClick={openEmojiPicker} />
        {emojiPickerEl}
      </div>
    </ErrorBoundary>
  );
};

Vue

このパターンをvueで実装する方法はいくつかあります。それらの1つは、EmojiPickerを動的にインポートすることです。レンダリングする必要がある場合、vueは必要なチャンクを動的にロードします。

v-if = "show"を使用すると、ボタンをクリックしてEmojiPickerコンポーネントの表示を制御できます。

<template>
  <div>
    <button @click="show = true">Load Emoji Picker</button>
    <div v-if="show">
      <emojipicker></emojipicker>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({ show: false }),
  components: {
    Emojipicker: () => import('./Emojipicker')
  }
};
</script>

このパターンは、Angularを含むコンポーネントの動的ロードをサポートするほとんどのフレームワークで使用できます。

つづく...

相互作用パターンのインポート（パート1）

?

JS

React

Vue

More articles: