処理反応の技術(コード剥離)

48223 ワード

反応項目をユーザに提供するには,構築作業を経て配布する必要がある.ビルド操作により、プロジェクトで使用するJavaScriptファイルから不要なコメント、警告メッセージ、スペースなどを削除し、ファイルサイズを最小限に抑えることができます.また、ブラウザでコードの変換ファイルを処理して、JSX構文や他の最新のJavaScript構文がスムーズに動作するようにすることもできます.
したがって,上記の作業はwebpackというツールが担当する.Webパッケージに個別の設定がない場合、プロジェクトで使用するJavaScriptファイルはすべて1つのファイルにマージされ、CSSファイルも1つのファイルにマージされます.
CRA(create react-app)を使用してプロジェクトを構築する場合、少なくとも2つのJavaScriptファイルが作成されます.CRAのデフォルトのWebパッケージ設定では、node modulesからのSplitChunksという機能が適用されます.サイズが一定を超えるファイルです.複数のファイル間で共有されたファイルを自動的に分離し、キャッシュの効果を本格的に楽しむことができるという.

yarn create react-app splitting-sample
cd splitting-sample
yarn build

build/staticを開くと、javascript fiが複数作成されます.
ファイルには5 beと書かれたハッシュ値が含まれています.(わかりませんが、それにハッシュ値が含まれているそうです…)この値は、構築中にファイルの内容に基づいて生成され、ブラウザは新しいファイルを受信する必要があるかどうかを知ることができます.
2で始まるファイルには、react、reactDOMなどのnode modulesからロードされたライブラリ関連コードが含まれます.
mainで始まるファイルには、プロジェクトで直接作成したアプリケーションなどのコンポーネントのコードが含まれます.
SplitChungsというWebパッケージ機能により、頻繁に変更されない鼻が2で始まるファイルにあるため、キャッシュのメリットをより長く楽しむことができます.
App.jsコードの変更

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello React!</p>
      </header>
    </div>
  );
}

export default App;

再び糸buildコマンドでプロジェクトを構築します.その後、buildでディレクトリを再開すると、mainで始まるファイル名が変更され、既存の2で始まるファイル名は変更されません.

このようにファイルを分離する操作をコード剥離と呼ぶ.プロジェクトに基本的にインストールされているSplitChungs機能によるコード配布では、効率的なキャッシュ効果しか得られません.A,B,Cからなる1ページアプリケーション(SPA)を開発する際に,Aページにアクセスし,B,Cページで使用するコンポーネントは不要であるとする.ユーザーが実際にBまたはCページに移動する場合にのみ必要です.
応答項目で個別に設定しないと、A、B、Cコンポーネントのコードは1つのファイル(main)に保存されます...(これは、以前に作成したニュースビューアをアップロードしたときに開いていない理由かもしれません.)規模が大きくなると、ファイルのサイズが非常に大きくなり、不要な構成部品情報もすべてロードされます.これではロードにも時間がかかるので、ユーザー体験が悪く、トラフィックも大きい.
この問題を解決する方法はコード非同期ロードである.これはコードの作成方法の1つです.コードを非同期でロードすることで、JavaScript関数、オブジェクト、コンポーネントを最初からロードして使用するのではなく、必要に応じてロードして使用することができます.
実習プロセス

JavaScript関数非同期ロード

React.素子非同期

はlazyとSuspenceによって提示される.

Loadable Components非同期レンダリング構成部品

19-1. JavaScript関数の非同期ロード

コンポーネントコードを記述する前に、liban javascript関数を巡回します.
src/notify.jsの作成後に作成

export default function notify() {
  alert("안녕하세요!");
}

Hello React! 文をクリックしてnotify関数を変更して実行

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import notify from "./notify";

function App() {
  const onClick = () => {
    notify();
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick}>Hello React!</p>
      </header>
    </div>
  );
}

export default App;

このようにコードを作成して構築すると、notifyコードがプライマリファイルに入ります.でも.

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const onClick = () => {
    import("./notify").then((result) => result.default());
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick}>Hello React!</p>
      </header>
    </div>
  );
}

export default App;

上部ではなくimport()関数をメソッドで使用する場合は、ファイルを別々に保存します.また、実際の関数が必要な場所からファイルをロードして関数を使用することができます.
importを関数としてPromiseを返します.このようにimportを関数として用いる構文は,まだ標準的なJavaScript構文ではないが,stage−3段階にある動的importと呼ぶ.
現在、Webパッケージによってサポートされており、プロジェクトに使用できる設定は必要ありません.この関数でモジュールをロードすると、モジュールはdefaultとしてエクスポートされます.defaultを参照してしか使えないそうです.

Hello React!クリックすると、新しいJavaScriptファイルがロードされます.内容をチェックすると、notifyに関連するコードしか見つかりません.

19-2. React.素子コードをlazyとSuspenceで剥離

reactは反応器に内蔵された実用的な関数である.Lazyと素子Suspenseがあります.

19-2-1. stateでコードを印刷する

React.lazyなしで素子のコードをジャンプし、反応する方法を理解します.lazyを使ってみるそうです.
まず簡単なコンポーネントを作成します.
SplitMe.js

import React from "react";

const SplitMe = () => {
  return <div>SplitMe</div>;
};

export default SplitMe;

App構成部品をクラス構成部品に変換します.次にhandleClickメソッドを作成し、SplitMeコンポーネントを読み込みstateに入れます.また、render関数でstate内のSplitMeが有効な場合は、SplitMeをレンダリングする必要があります.
App.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {
  state = {
    SplitMe: null,
  };

  handleClick = async () => {
    const loadedModule = await import("./SplitMe");
    this.setState({
      SplitMe: loadedModule.default,
    });
  };

  render() {
    const { SplitMe } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p onClick={this.handleClick}>Hello React!</p>
          {SplitMe && <SplitMe />}
        </header>
      </div>
    );
  }
}

export default App;

よかった.
stateを使用して素子コードの剥離を行い、毎回stateを宣言するのは少し不便です.

19-2-2. React.LazyとSuspenceの使用

React.LazyとSuspenceを使用すると、状態を単独で宣言することなく、コンポーネントコードから簡単に飛び出すことができます.

React.Lazy:エレメントをレンダリングするときにエレメントを非同期でロードできるユーティリティ関数です.

const SplitMe = React.lazy(() => import('./SplitMe'));

Suspense:応答内蔵コンポーネントを使用してコードスプリットコンポーネントを起動し、ロードが完了していないときに表示されるUIを設定できます.

import React, { Suspense } from 'react';

...

<Suspense fallback={<div>loading...</div>}>
	<SplitMe />
</Suspense>

Suspenceではfallback propsでロード中に表示されるJSXを指定できます.
App構成部品を関数に戻す

import React, { useState, Suspense } from "react";
import logo from "./logo.svg";
import "./App.css";

const SplitMe = React.lazy(() => import("./SplitMe"));

function App() {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick}>Hello React!</p>
        <Suspense fallback={<div>loading...</div>}>
          {visible && <SplitMe />}
        </Suspense>
      </header>
    </div>
  );
}

export default App;

わざとスローシミュレーションを使う.よく撮れていることを確認しました.

19-2-3. Loadableコンポーネントからコードを印刷

Loadable Components

サードパーティ製ライブラリ

、コードの剥離を容易に

の利点

サーバ側レンダリングをサポート

React.Lazy、Suspenceはまた、サーバ側レンダリングX

をサポートします.

は、レンダリング前に必要に応じて印刷ファイルをプリロードする機能

を有する.
ここで、サーバ側レンダリングとは?

テクノロジーにより、Webサービスの初期ロード速度を向上させ、キャッシュと検索エンジンを最適化

ブラウザ側ではなくサーバ側でWebサービスを処理するための初期レンダリング

ユーザは、サーバによってレンダリングするhtml結果を受信してそのまま使用することで、初期ロード速度が向上し、検索エンジンでスクロールする際にも問題がない

yarn add @loadable/component

使用方法はreactです.lazyに似ています.Suspenceは不要
App.js

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import loadable from "@loadable/component";

const SplitMe = loadable(() => import("./SplitMe"));

function App() {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick}>Hello React!</p>
        {visible && <SplitMe />}
      </header>
    </div>
  );
}

export default App;

ロード中に他のUIを表示する場合は、loadableの部分を使用します.

const SplitMe = loadable(() => import("./SplitMe"), {
  fallback: <div>loading...</div>,
});

変更
構成部品をプリロードする方法

import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import loadable from "@loadable/component";

const SplitMe = loadable(() => import("./SplitMe"), {
  fallback: <div>loading...</div>,
});

function App() {
  const [visible, setVisible] = useState(false);
  const onClick = () => {
    setVisible(true);
  };

  const onMouseOver = () => {
    SplitMe.preload();
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p onClick={onClick} onMouseOver={onMouseOver}>
          Hello React!
        </p>
        {visible && <SplitMe />}
      </header>
    </div>
  );
}

export default App;

マウスをHelloReactに移動します!上に置くだけでロードが開始され、クリックしたときにレンダリングされます.
Loadable Componentsは、プリロード機能のほか、タイムアウト、ロードUI遅延、サーバ側レンダリング互換性など多くの機能を提供しています.
正式文書(https://www.smooth-code.com/open-source/loadable-components/docs/delay/)

Reference

この問題について(処理反応の技術(コード剥離)), 我々は、より多くの情報をここで見つけました https://velog.io/@dohy9443/리액트를-다루는-기술-코드-스플리팅

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Linuxプロセス間関係デーモン

Linuxプロセス表示コマンドps top htop dstat