Importer sur un modèle d'interaction (partie 1)

Lien vers l'original

Le modèle consiste en un chargement différé des ressources, c'est-à-dire uniquement lorsque l'utilisateur a besoin d'une partie de l'interface.

Notre page peut contenir des données ou des composants qui ne sont pas nécessaires pour le moment. Par exemple, il peut s'agir d'une partie de l'interface que l'utilisateur ne verra pas, sauf s'il clique dessus ou y fait défiler.

Ces parties de l'interface peuvent être des lecteurs vidéo, des chats ou une partie de l'interface qui apparaît en un clic.

Le chargement actif de ces ressources, si elles pèsent beaucoup, peut bloquer le thread principal et augmenter le temps avant d'interagir avec la page.

Cela peut avoir un impact négatif sur les métriques telles que:

• FID (premier délai d'entrée)

  
  
  
  
  

• TBT (temps total de blocage)

  
  
  
  
  

• TTI (Time To Interactive)

  
  
  
  
  

Au lieu de charger toutes les ressources immédiatement, vous pouvez les charger à des moments plus appropriés, par exemple:

• L'utilisateur clique sur le composant pour la première fois

  
  
  
  
  

• Le composant est dans la fenêtre

  
  
  
  
  

• Ou reporter le téléchargement du composant jusqu'à ce que le navigateur soit inactif (via requestIdleCallback )

  
  
  
  
  

Diverses options pour savoir comment charger les ressources:

• Immédiatement - la façon habituelle de charger des scripts

  
  
  
  
  

• Lazy (pour le routeur) - se charge lorsque l'utilisateur visite des pages

  
  
  
  
  

• 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

Il existe plusieurs façons d'implémenter ce modèle en vue. L'un d'eux consiste à importer dynamiquement l'EmojiPicker. Lorsque vous avez besoin de le rendre, vue chargera dynamiquement le morceau requis.

Avec v-if = "show" nous pouvons contrôler l'affichage du composant EmojiPicker en cliquant sur le bouton:

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ce modèle peut être utilisé avec la plupart des frameworks prenant en charge le chargement dynamique des composants, y compris Angular .

À suivre...