Import nach Interaktionsmuster (Teil 1)

Link zum Original

Das Muster besteht aus dem verzögerten Laden von Ressourcen, dh nur dann, wenn der Benutzer einen Teil der Benutzeroberfläche benötigt.

Unsere Seite enthält möglicherweise Daten oder Komponenten, die derzeit nicht benötigt werden. Beispielsweise kann es ein Teil der Benutzeroberfläche sein, den der Benutzer nicht sieht, es sei denn, er klickt darauf oder scrollt dorthin.

Diese Teile der Benutzeroberfläche können Videoplayer, Chats oder ein Teil der Benutzeroberfläche sein, der mit einem Klick angezeigt wird.

Das aktive Laden dieser Ressourcen kann, wenn sie viel wiegen, den Haupt-Thread blockieren und die Zeit vor der Interaktion mit der Seite verlängern.

Dies kann sich negativ auf Metriken auswirken wie:

• FID (First Input Delay)

  
  
  
  
  

• TBT (Total Blocking Time)

  
  
  
  
  

• TTI (Time To Interactive)

  
  
  
  
  

Anstatt alle Ressourcen sofort zu laden, können Sie sie zu angemesseneren Zeiten laden, zum Beispiel:

• Der Benutzer klickt zum ersten Mal auf die Komponente

  
  
  
  
  

• Die Komponente befindet sich im Ansichtsfenster

  
  
  
  
  

• Oder verschieben Sie den Download der Komponente, bis der Browser inaktiv ist (über requestIdleCallback ).

  
  
  
  
  

Verschiedene Optionen zum Laden von Ressourcen:

• Sofort - die übliche Art, Skripte zu laden

  
  
  
  
  

• Lazy (für Router) - wird geladen, wenn der Benutzer Seiten besucht

  
  
  
  
  

• 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

Es gibt verschiedene Möglichkeiten, dieses Muster in vue zu implementieren. Eine davon ist das dynamische Importieren des EmojiPicker. Wenn Sie es rendern müssen, lädt vue den erforderlichen Block dynamisch.

Mit v-if = "show" können wir die Anzeige der EmojiPicker-Komponente steuern, indem wir auf die Schaltfläche klicken:

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Dieses Muster kann mit den meisten Frameworks verwendet werden, die das dynamische Laden von Komponenten unterstützen, einschließlich Angular .

Fortsetzung folgt...