Impor pada Pola Interaksi (Bagian 1)

Tautan ke aslinya

Pola ini terdiri dari pemuatan lambat sumber daya, yaitu hanya ketika pengguna membutuhkan beberapa bagian dari antarmuka.

Halaman kami mungkin berisi data atau komponen yang tidak dibutuhkan saat ini. Misalnya, ini bisa menjadi bagian dari antarmuka yang tidak akan dilihat pengguna, kecuali dia mengkliknya atau menggulir ke sana.

Bagian antarmuka ini dapat berupa pemutar video, obrolan, atau bagian antarmuka yang muncul dengan sekali klik.

Pemuatan aktif sumber daya ini, jika sangat berat, dapat memblokir utas utama dan meningkatkan waktu sebelum berinteraksi dengan halaman.

Ini dapat berdampak negatif pada metrik seperti:

• FID (Penundaan Input Pertama)

  
  
  
  
  

• TBT (Total Waktu Pemblokiran)

  
  
  
  
  

• TTI (Waktu Untuk Interaktif)

  
  
  
  
  

Daripada langsung memuat semua sumber daya, Anda dapat memuatnya pada waktu yang lebih tepat, misalnya:

• Pengguna mengklik komponen untuk pertama kali

  
  
  
  
  

• Komponen ada di viewport

  
  
  
  
  

• Atau tunda pengunduhan komponen hingga browser menganggur (melalui requestIdleCallback )

  
  
  
  
  

Berbagai opsi tentang bagaimana kami dapat memuat sumber daya:

• Segera - cara biasa untuk memuat skrip

  
  
  
  
  

• Lazy (untuk router) - memuat ketika pengguna mengunjungi halaman

  
  
  
  
  

• 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

Ada beberapa cara untuk mengimplementasikan pola ini di vue. Salah satunya adalah mengimpor EmojiPicker secara dinamis. Saat Anda perlu merendernya, vue akan secara dinamis memuat potongan yang diperlukan.

Dengan v-if = "show" kita dapat mengontrol tampilan komponen EmojiPicker dengan mengklik tombol:

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

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Pola ini dapat digunakan dengan sebagian besar kerangka kerja yang mendukung pemuatan dinamis komponen, termasuk Angular .

Bersambung...