React - Wyświetla ekran ładowania podczas renderowania DOM?

To jest przykład ze strony aplikacji Google Adsense. Ekran ładowania wyświetlany przed wyświetleniem strony głównej po.

Nie wiem, jak zrobić to samo z Reactem, ponieważ jeśli wykonam ekran ładowania renderowany przez komponent React, nie wyświetla się on podczas ładowania strony, ponieważ musi czekać na renderowanie DOM wcześniej.

Zaktualizowano :

Zrobiłem przykład mojego podejścia, umieszczając program ładujący ekran index.htmli usuwając go w componentDidMount()metodzie cyklu życia React .

Przykład i ekran ponownego ładowania .

Można to zrobić, umieszczając ikonę ładowania w pliku html (np. Index.html), tak aby użytkownicy widzieli tę ikonę natychmiast po załadowaniu pliku html.

Po zakończeniu ładowania aplikacji możesz po prostu usunąć tę ikonę ładowania w haku cyklu życia, zwykle robię to w componentDidMount.

Cel

Kiedy strona html jest renderowana, natychmiast wyświetl spinner (podczas ładowania Reacta) i ukryj go, gdy React będzie gotowy.

Ponieważ spinner jest renderowany w czystym HTML / CSS (poza domeną React), React nie powinien bezpośrednio kontrolować procesu pokazywania / ukrywania, a implementacja powinna być przezroczysta dla Reacta.

Rozwiązanie 1 - pseudoklasa: pusta

Ponieważ renderujesz reaguje na kontener DOM - <div id="app"></div> możesz dodać spinner do tego kontenera, a kiedy reakcja się załaduje i wyrenderuje, spinner zniknie.

Nie możesz dodać elementu DOM (na przykład elementu div) do elementu React root, ponieważ React zastąpi zawartość kontenera natychmiast po ReactDOM.render()wywołaniu. Nawet jeśli wyrenderujesz null, zawartość i tak zostanie zastąpiona komentarzem - <!-- react-empty: 1 -->. Oznacza to, że jeśli chcesz wyświetlić moduł ładujący podczas montowania głównego komponentu, dane są ładowane, ale w rzeczywistości nic nie jest renderowane, znacznik modułu ładującego umieszczony wewnątrz kontenera ( <div id="app"><div class="loader"></div></div>na przykład) nie zadziała.

Aby obejść ten problem, należy dodać klasę spinner do kontenera reagującego i użyć :emptypseudoklasy . Spinner będzie widoczny, o ile nic nie zostanie wyrenderowane w kontenerze (komentarze się nie liczą). Gdy tylko reakcja wyświetli coś innego niż komentarz, moduł ładujący zniknie.

Przykład 1

W tym przykładzie widać komponent, który renderuje się, nulldopóki nie będzie gotowy. Kontener jest również modułem ładującym - <div id="app" class="app"></div>a klasa modułu ładującego będzie działać tylko wtedy, gdy jest :empty(zobacz komentarze w kodzie):

class App extends React.Component {
  state = {
    loading: true
  };

  componentDidMount() {
    // this simulates an async action, after which the component will render the content
    demoAsyncCall().then(() => this.setState({ loading: false }));
  }
  
  render() {
    const { loading } = this.state;
    
    if(loading) { // if your component doesn't have to wait for an async action, remove this block 
      return null; // render null when app is not ready
    }
    
    return (
      <div>I'm the app</div>
    ); 
  }
}

function demoAsyncCall() {
  return new Promise((resolve) => setTimeout(() => resolve(), 2500));
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

.loader:empty {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  border-radius: 50%;
  animation: load8 1.1s infinite linear;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<div id="app" class="loader"></div> <!-- add class loader to container -->

Przykład 2

Odmianą użycia :emptypseudoklasy do pokazania / ukrycia selektora jest ustawienie pokrętła jako elementu siostrzanego w kontenerze aplikacji i pokazanie go, dopóki kontener jest pusty, przy użyciu sąsiedniego łącznika siostrzanego ( +):

class App extends React.Component {
  state = {
    loading: true
  };

  componentDidMount() {
    // this simulates an async action, after which the component will render the content
    demoAsyncCall().then(() => this.setState({ loading: false }));
  }
  
  render() {
    const { loading } = this.state;
    
    if(loading) { // if your component doesn't have to wait for async data, remove this block 
      return null; // render null when app is not ready
    }
    
    return (
      <div>I'm the app</div>
    ); 
  }
}

function demoAsyncCall() {
  return new Promise((resolve) => setTimeout(() => resolve(), 2500));
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

#app:not(:empty) + .sk-cube-grid {
  display: none;
}

.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #333;
  float: left;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
  animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
  animation-delay: 0.2s;
}

@keyframes sk-cubeGridScaleDelay {
  0%,
  70%,
  100% {
    transform: scale3D(1, 1, 1);
  }
  35% {
    transform: scale3D(0, 0, 1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<div id="app"></div>
<!-- add class loader to container -->

<div class="sk-cube-grid">
  <div class="sk-cube sk-cube1"></div>
  <div class="sk-cube sk-cube2"></div>
  <div class="sk-cube sk-cube3"></div>
  <div class="sk-cube sk-cube4"></div>
  <div class="sk-cube sk-cube5"></div>
  <div class="sk-cube sk-cube6"></div>
  <div class="sk-cube sk-cube7"></div>
  <div class="sk-cube sk-cube8"></div>
  <div class="sk-cube sk-cube9"></div>
</div>

Rozwiązanie 2 - Podaj "handlerów" spinnerów jako rekwizyty

Aby mieć bardziej szczegółową kontrolę nad stanem wyświetlania przędzarek, utwórz dwie funkcje showSpinneri hideSpinneri przekaż je do kontenera głównego za pomocą rekwizytów. Funkcje mogą manipulować DOM lub robić wszystko, co potrzebne, aby sterować przędzarką. W ten sposób React nie jest świadomy „świata zewnętrznego” ani nie musi bezpośrednio kontrolować DOM. Możesz łatwo zamienić funkcje do testowania lub jeśli potrzebujesz zmienić logikę, i możesz przekazać je innym komponentom w drzewie React.

Przykład 1

const loader = document.querySelector('.loader');

// if you want to show the loader when React loads data again
const showLoader = () => loader.classList.remove('loader--hide');

const hideLoader = () => loader.classList.add('loader--hide');

class App extends React.Component {
  componentDidMount() {
    this.props.hideLoader();
  }
  
  render() {   
    return (
      <div>I'm the app</div>
    ); 
  }
}

// the setTimeout simulates the time it takes react to load, and is not part of the solution
setTimeout(() => 
  // the show/hide functions are passed as props
  ReactDOM.render(
    <App
      hideLoader={hideLoader}
      showLoader={showLoader} 
      />,
    document.getElementById('app')
  )
, 1000);

.loader {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  border-radius: 50%;
  animation: load8 1.1s infinite linear;
  transition: opacity 0.3s;
}

.loader--hide {
  opacity: 0;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js"></script>

<div id="app"></div>

<div class="loader"></div>

Przykład 2 - haki

W tym przykładzie zastosowano useEffecthaczyk do ukrycia kołpaka po zamontowaniu komponentu.

const { useEffect } = React;

const loader = document.querySelector('.loader');

// if you want to show the loader when React loads data again
const showLoader = () => loader.classList.remove('loader--hide');

const hideLoader = () => loader.classList.add('loader--hide');

const App = ({ hideLoader }) => {
  useEffect(hideLoader, []);
  
  return (
    <div>I'm the app</div>
  ); 
}

// the setTimeout simulates the time it takes react to load, and is not part of the solution
setTimeout(() => 
  // the show/hide functions are passed as props
  ReactDOM.render(
    <App
      hideLoader={hideLoader}
      showLoader={showLoader} 
      />,
    document.getElementById('app')
  )
, 1000);

.loader {
  position: absolute;
  top: calc(50% - 4em);
  left: calc(50% - 4em);
  width: 6em;
  height: 6em;
  border: 1.1em solid rgba(0, 0, 0, 0.2);
  border-left: 1.1em solid #000000;
  border-radius: 50%;
  animation: load8 1.1s infinite linear;
  transition: opacity 0.3s;
}

.loader--hide {
  opacity: 0;
}

@keyframes load8 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

<div class="loader"></div>

Sposób obejścia tego problemu:

W swojej funkcji renderującej zrób coś takiego:

constructor() {
    this.state = { isLoading: true }
}

componentDidMount() {
    this.setState({isLoading: false})
}

render() {
    return(
        this.state.isLoading ? *showLoadingScreen* : *yourPage()*
    )
}

Zainicjuj isLoading jako true w konstruktorze i false na componentDidMount

Jeśli ktoś szuka biblioteki typu drop-in, zero-config i zero-dependencies dla powyższego przypadku użycia, wypróbuj pace.js ( http://github.hubspot.com/pace/docs/welcome/ ).

Automatycznie podłącza się do zdarzeń (ajax, readyState, historia pushstate, pętla zdarzeń js itp.) I pokazuje konfigurowalny program ładujący.

Działał dobrze z naszymi projektami reagowania / przekazywania (obsługuje zmiany nawigacji za pomocą routera reagowania, żądań przekaźników) (nie jest powiązany; używał pace.js w naszych projektach i działał świetnie)

Kiedy Twoja aplikacja React jest ogromna, jej uruchomienie i uruchomienie po załadowaniu strony zajmuje naprawdę dużo czasu. Powiedzmy, że montujesz część React aplikacji do #app. Zwykle ten element w pliku index.html to po prostu pusty element div:

<div id="app"></div>

Zamiast tego możesz umieścić trochę stylizacji i kilka obrazów, aby wyglądało lepiej między załadowaniem strony a początkowym renderowaniem aplikacji React do DOM:

<div id="app">
  <div class="logo">
    <img src="/my/cool/examplelogo.svg" />
  </div>
  <div class="preload-title">
    Hold on, it's loading!
  </div>
</div>

Po załadowaniu strony użytkownik natychmiast zobaczy oryginalną zawartość index.html. Wkrótce, gdy React będzie gotowy do zamontowania całej hierarchii renderowanych komponentów do tego węzła DOM, użytkownik zobaczy rzeczywistą aplikację.

Uwaga class, nie className. To dlatego, że musisz umieścić to w swoim pliku html.

Jeśli używasz SSR, sprawy są mniej skomplikowane, ponieważ użytkownik faktycznie zobaczy prawdziwą aplikację zaraz po załadowaniu strony.

Stanie się to zanim ReactDOM.render()przejmie kontrolę nad rootem <div> . Oznacza to, że Twoja aplikacja nie została zainstalowana do tego momentu.

Możesz więc dodać program ładujący do index.htmlpliku w katalogu głównym<div> . Będzie to widoczne na ekranie, dopóki React nie przejmie władzy.

Możesz użyć dowolnego elementu programu ładującego, który najlepiej Ci odpowiada ( svgna przykład z animacją).

Nie musisz go usuwać w żadnej metodzie cyklu życia. React zastąpi wszystkie elementy podrzędne swojego roota <div> renderowanym <App/>, jak widać na poniższym GIF-ie.

Przykład na CodeSandbox

index.html

<head>
  <style>
    .svgLoader {
      animation: spin 0.5s linear infinite;
      margin: auto;
    }
    .divLoader {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="divLoader">
      <svg class="svgLoader" viewBox="0 0 1024 1024" width="10em" height="10em">
        <path fill="lightblue"
          d="PATH FOR THE LOADER ICON"
        />
      </svg>
    </div>
  </div>
</body>

index.js

Służy debuggerdo sprawdzania strony przed ReactDOM.render()uruchomieniem.

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

debugger; // TO INSPECT THE PAGE BEFORE 1ST RENDER

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Obecnie w React 16.8 możemy używać hooków:

import React, { useState, useEffect } from 'react';

const App = () => {
  const [ spinner, setSpinner ] = useState(true);

  // It will be executed before rendering

  useEffect(() => {
    setTimeout(() => setSpinner(false), 1000)
  }, []);

  // [] means like componentDidMount

  return !spinner && <div>Your content</div>;
};

export default App;

Ustawienie limitu czasu w componentDidMount działa, ale w mojej aplikacji otrzymałem ostrzeżenie o wycieku pamięci. Spróbuj czegoś takiego.

constructor(props) {
    super(props)
    this.state = { 
      loading: true,
    }
  }
  componentDidMount() {
    this.timerHandle = setTimeout(() => this.setState({ loading: false }), 3500); 
  }

  componentWillUnmount(){
    if (this.timerHandle) {
      clearTimeout(this.timerHandle);
      this.timerHandle = 0;
    }
  }

Niedawno musiałem uporać się z tym problemem i znalazłem rozwiązanie, które dla mnie działa dobrze. Jednak próbowałem powyżej rozwiązania @Ori Drori i niestety nie działało to dobrze (miało pewne opóźnienia + nie podoba mi się użyciesetTimeout tam funkcji).

Oto, co wymyśliłem:

index.html plik

headTag wewnętrzny - style wskaźnika:

<style media="screen" type="text/css">

.loading {
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
  background-color: black;
  border-radius: 100%;
  height: 6em;
  width: 6em;
}

.container {
  align-items: center;
  background-color: white;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

@keyframes sk-scaleout {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
    transform: scale(1.0);
  }
}

</style>

Teraz ten bodytag:

<div id="spinner" class="container">
  <div class="loading"></div>
</div>

<div id="app"></div>

Następnie pojawia się bardzo prosta logika, wewnątrz app.jspliku (w funkcji renderowania):

const spinner = document.getElementById('spinner');

if (spinner && !spinner.hasAttribute('hidden')) {
  spinner.setAttribute('hidden', 'true');
}

Jak to działa?

Kiedy pierwszy komponent (w mojej aplikacji jest tak samo app.jsw większości przypadków) zamontowany poprawnie, spinnerjest on ukrywany z zastosowaniem hiddendo niego atrybutu.

Co ważniejsze do dodania - !spinner.hasAttribute('hidden')warunek zapobiega dodawaniu hiddenatrybutu do błystki przy każdym montażu komponentu, więc w rzeczywistości zostanie dodany tylko raz, gdy cała aplikacja się załaduje.

Używam React-Progress-2 pakietu NPM React , który jest zależny od zera i działa świetnie w ReactJS.

https://github.com/milworm/react-progress-2

Instalacja:

npm install react-progress-2

Dołącz do swojego projektu react-progress-2 / main.css.

import "node_modules/react-progress-2/main.css";

Uwzględnij react-progress-2i umieść gdzieś w górnym komponencie, na przykład:

import React from "react";
import Progress from "react-progress-2";

var Layout = React.createClass({
render: function() {
    return (
        <div className="layout">
            <Progress.Component/>
                {/* other components go here*/}
            </div>
        );
    }
});

Teraz, gdy chcesz pokazać wskaźnik, po prostu zadzwoń Progress.show(), na przykład:

loadFeed: function() {
    Progress.show();
    // do your ajax thing.
},

onLoadFeedCallback: function() {
    Progress.hide();
    // render feed.
}

Zwróć uwagę, że showi hidewywołania są ułożone w stos, więc po n-kolejnych wywołaniach show, musisz wykonać n hide wywołań, aby ukryć wskaźnik lub możesz użyć Progress.hideAll().

Używam również Reacta w mojej aplikacji. W przypadku żądań używam przechwytywaczy axios, więc świetnym sposobem na utworzenie ekranu modułu ładującego (na całej stronie, jak pokazano na przykładzie) jest dodanie klasy lub identyfikatora do na przykład body inside przechwytywacze (tutaj kod z oficjalnej dokumentacji z niestandardowym kodem):

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
     document.body.classList.add('custom-loader');
     return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Do something with response data
       document.body.classList.remove('custom-loader');
       return response;
  }, function (error) {
    // Do something with response error
    return Promise.reject(error);
  }); 

A potem po prostu zaimplementuj w CSS swój moduł ładujący z pseudoelementami (lub dodaj klasę lub identyfikator do innego elementu, a nie body, jak chcesz) - możesz ustawić kolor tła na nieprzezroczysty lub przezroczysty, itp ... Przykład:

custom-loader:before {
    background: #000000;
    content: "";
    position: fixed;
    ...
}

custom-loader:after {
    background: #000000;
    content: "Loading content...";
    position: fixed;
    color: white;
    ...
}

Edytuj lokalizację pliku index.html w folderze publicznym . Skopiuj obraz do tej samej lokalizacji co plik index.html w folderze publicznym. A następnie zamień część zawartości index.html zawierającą <div id="root"> </div>tagi na poniższy kod html.

<div id="root">  <img src="logo-dark300w.png" alt="Spideren" style="vertical-align: middle; position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -100px; /* Half the height */
   margin-left: -250px; /* Half the width */" />  </div>

Logo będzie się teraz pojawiać na środku strony podczas procesu ładowania. Po kilku sekundach zostanie zastąpiony przez React.

Nie potrzebujesz tyle wysiłku, oto podstawowy przykład.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000" />
  <meta name="description" content="Web site created using create-react-app" />
  <link rel="apple-touch-icon" href="logo192.png" />
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>Title</title>
  <style>
    body {
      margin: 0;
    }

    .loader-container {
      width: 100vw;
      height: 100vh;
      display: flex;
      overflow: hidden;
    }

    .loader {
      margin: auto;
      border: 5px dotted #dadada;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      width: 100px;
      height: 100px;
      -webkit-animation: spin 2s linear infinite;
      animation: spin 2s linear infinite;
    }

    @-webkit-keyframes spin {
      0% {
        -webkit-transform: rotate(0deg);
      }

      100% {
        -webkit-transform: rotate(360deg);
      }
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

  </style>
</head>

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root">
    <div class="loader-container">
      <div class="loader"></div>
    </div>
  </div>
</body>

</html>

Możesz bawić się HTMLi CSSsprawić, by wyglądał jak twój przykład.

Najważniejsze pytanie brzmi: co rozumiesz przez „ładowanie”? Jeśli mówisz o montowanym elemencie fizycznym, niektóre z pierwszych odpowiedzi są świetne. Jeśli jednak pierwsza rzecz, jaką wykonuje aplikacja, to sprawdzenie uwierzytelnienia, tak naprawdę ładujesz dane z zaplecza, czy użytkownik przekazał plik cookie oznaczający go jako autoryzowanego lub nieautoryzowanego użytkownika.

Opiera się to na reduksie, ale można go łatwo zmienić na zwykły model stanu reakcji.

twórca akcji:

export const getTodos = () => {
  return async dispatch => {
    let res;
    try {
      res = await axios.get('/todos/get');

      dispatch({
        type: AUTH,
        auth: true
      });
      dispatch({
        type: GET_TODOS,
        todos: res.data.todos
      });
    } catch (e) {
    } finally {
      dispatch({
        type: LOADING,
        loading: false
      });
    }
  };
};

Ostatnia część oznacza, czy użytkownik jest autoryzowany, czy nie, ekran ładowania znika po otrzymaniu odpowiedzi.

Oto jak mógłby wyglądać komponent, który go ładuje:

class App extends Component {
  renderLayout() {
    const {
      loading,
      auth,
      username,
      error,
      handleSidebarClick,
      handleCloseModal
    } = this.props;
    if (loading) {
      return <Loading />;
    }
    return (
      ...
    );
  }

  ...

  componentDidMount() {
    this.props.getTodos();
  }

...

  render() {
    return this.renderLayout();
 }

}

Jeśli state.loading jest prawdą, zawsze zobaczymy ekran ładowania. Na componentDidMount wywołujemy naszą funkcję getTodos, która jest twórcą akcji, która zmienia stan. Ładowanie fałszywie, gdy otrzymamy odpowiedź (co może być błędem). Nasz komponent aktualizuje się, wywołania renderują się ponownie i tym razem nie ma ekranu ładowania z powodu instrukcji if.

Uruchomienie aplikacji React opiera się na pobraniu głównego pakietu. Aplikacja React uruchamia się dopiero po pobraniu głównego pakietu w przeglądarce. Dzieje się tak nawet w przypadku leniwej architektury ładowania. Ale faktem jest, że nie możemy dokładnie określić nazwy żadnego pakietu. Ponieważ pakiet webpack doda wartość skrótu na końcu każdego pakietu w momencie uruchomienia polecenia „npm run build”. Oczywiście możemy tego uniknąć, zmieniając ustawienia skrótu, ale poważnie wpłynie to na problem z danymi pamięci podręcznej w przeglądarce. Przeglądarki mogą nie przyjąć nowej wersji z powodu tej samej nazwy pakietu. . potrzebujemy podejścia webpack + js + CSS, aby poradzić sobie z tą sytuacją.

zmień plik public / index.html jak poniżej

<!DOCTYPE html>
<html lang="en" xml:lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=3.0, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
  <style>
 .percentage {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 150px;
      height: 150px;
      border: 1px solid #ccc;
      background-color: #f3f3f3;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      border: 1.1em solid rgba(0, 0, 0, 0.2);
      border-radius: 50%;
      overflow: hidden;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

    .innerpercentage {
      font-size: 20px;
    }
  </style>
  <script>
    function showPercentage(value) {
      document.getElementById('percentage').innerHTML = (value * 100).toFixed() + "%";
    }
    var req = new XMLHttpRequest();
    req.addEventListener("progress", function (event) {
      if (event.lengthComputable) {
        var percentComplete = event.loaded / event.total;
        showPercentage(percentComplete)
        // ...
      } else {
        document.getElementById('percentage').innerHTML = "Loading..";
      }
    }, false);

    // load responseText into a new script element
    req.addEventListener("load", function (event) {
      var e = event.target;
      var s = document.createElement("script");
      s.innerHTML = e.responseText;
      document.documentElement.appendChild(s);
      document.getElementById('parentDiv').style.display = 'none';

    }, false);

    var bundleName = "<%= htmlWebpackPlugin.files.chunks.main.entry %>";
    req.open("GET", bundleName);
    req.send();

  </script>
  <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

  <title>App Name</title>
  <link href="<%= htmlWebpackPlugin.files.chunks.main.css[0] %>" rel="stylesheet">
</head>

<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="parentDiv" class="percentage">
    <div id="percentage" class="innerpercentage">loading</div>
  </div>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
</body>

</html>

W konfiguracji paczki produkcyjnej zmień opcję HtmlWebpackPlugin na poniżej

 new HtmlWebpackPlugin({
          inject: false,
...

Może być konieczne użycie polecenia „eject”, aby pobrać plik konfiguracyjny. Najnowszy pakiet internetowy może mieć opcję konfiguracji HtmlWebpackPlugin bez wysuwania projektu.

Użyłem również odpowiedzi @Ori Drori i udało mi się to uruchomić. Wraz z rozrastaniem się kodu Reacta, skompilowane pakiety będą musiały być pobierane przez przeglądarkę klienta przy pierwszym dostępie. Powoduje to problem z wygodą użytkownika, jeśli nie poradzisz sobie z tym dobrze.

To, co dodałem do odpowiedzi @Ori, to dodanie i wykonanie funkcji onload w index.html atrybucie onload tagu body, aby moduł ładujący zniknął po całkowitym załadowaniu wszystkiego w przeglądarce, zobacz poniższy fragment:

<html>
  <head>
     <style>
       .loader:empty {
          position: absolute;
          top: calc(50% - 4em);
          left: calc(50% - 4em);
          width: 6em;
          height: 6em;
          border: 1.1em solid rgba(0, 0, 0, 0.2);
          border-left: 1.1em solid #000000;
          border-radius: 50%;
          animation: load8 1.1s infinite linear;
        }
        @keyframes load8 {
          0% {
           transform: rotate(0deg);
          }
          100% {
           transform: rotate(360deg);
          }
        }
     </style>
     <script>
       function onLoad() {
         var loader = document.getElementById("cpay_loader");loader.className = "";}
     </script>
   </head>
   <body onload="onLoad();">
     more html here.....
   </body>
</html>

A co z używaniem Pace

Użyj tego adresu łącza tutaj.

https://github.hubspot.com/pace/docs/welcome/

1. Na ich stronie internetowej wybierz żądany styl i wklej w index.css

2. przejdź do cdnjs Skopiuj link do Pace Js i dodaj do swoich skryptów tagi w public / index.html

3. Automatycznie wykrywa obciążenia internetowe i wyświetla tempo na górze przeglądarki.

Możesz także zmienić wysokość i animację w css.