프런트엔드 성능 최적화, 코드 분할에 React 사용게으름과 궁금증🔥

프런트엔드 성능이 중요합니다.JavaScript는 단순한 언어임에도 불구하고 예상 밖의 복잡한 코드 라이브러리를 생성할 수 있어 확장이 어렵다.일부 원인은 각양각색의 종류와 모듈이 사용할 수 있기 때문이다.대부분의 실질적인 자바스크립트 프로그램과 프레임워크에는 많은 의존 항목이 있는데, 이것은 간단한 항목으로 보이는 대량의 코드를 신속하게 삽입할 수 있다.
항목의 코드가 많을수록 브라우저가 불러오는 속도가 느려집니다.따라서 종속 항목의 크기와 JavaScript의 예상 성능을 균형 있게 조절해야 하는 경우가 많습니다.코드 분할은 이런 균형을 실현하는 유용한 방법이다.

코드 분할이란 무엇입니까?

클라이언트 렌더링(CSR) 많은 JavaScript 프레임워크는 모든 종속성을 하나의 큰 파일에 묶습니다.따라서 HTML 웹 페이지에 JavaScript를 쉽게 추가할 수 있습니다.이 번들은 모든 JavaScript가 한 곳에 있기 때문에 링크 탭만 있으면 되고, 페이지를 설정하는 데 필요한 호출이 더 적습니다.이론적으로 말하자면 이런 방식으로 자바스크립트를 묶으면 페이지의 마운트 속도를 가속화하고 페이지가 처리해야 할 데이터를 낮출 수 있을 것이다.
그러나 어떤 점에서 하나의 가방은 일정한 크기로 증가할 수 있다. 이때 코드를 설명하고 실행하는 비용은 페이지의 마운트 속도를 낮추는 것이지 페이지의 마운트 속도를 높이는 것이 아니다.모든 페이지의 임계점은 다르다. 페이지가 어디에 있는지 테스트해서 찾아내야 한다.통용되는 지도 방침이 하나도 없다 - 이 모든 것은 불러오는 의존항에 의존합니다.
코드 분할의 관건은 페이지의 어떤 부분에 서로 다른 자바스크립트 의존항이 필요한지 확인하는 것이다.코드 분리는 패키지에서 일부 의존 항목을 전략적으로 삭제한 다음 필요한 곳에만 삽입할 수 있도록 합니다.첫 번째 페이지를 로드할 때 응용 프로그램을 구성하는 모든 JavaScript를 즉시 보내는 것이 아니라 JavaScript를 여러 블록으로 나누어 페이지 성능을 크게 향상시켰다.

코드 분할은 대형 응용 프로그램에서 흔히 볼 수 있는 방법으로, 사용자가 웹 응용 프로그램을 계속 사용하든지 떠나든지 하는 속도를 높일 수 있다.많은 연구에 의하면 페이지가 사용자에게 인상을 남기는 시간이 3초도 안 되기 때문에 몇 초라도 짧아진다고 한다.따라서 3초 이상의 적재 시간을 목표로 하는 것이 이상적이다.

너의 소포를 분리하고 줄여라

너무 많은 공간을 차지하는 어떤 것도 버려라.당신이 사용하고 있는 라이브러리에 더 가벼운 대체 방안이 있는지 보십시오.시간을 이용하다.js?날짜 fns를 시험해 보세요.lodash를 사용하시겠습니까?lodash와lodash를 사용해 보세요.실제 사용되는 개별 부품만 가져오는지 확인합니다.
✅ 하다

import find from 'lodash/find'; find([])

❌ 하지 마..

import _ from 'lodash'; _.find([])

React에서 코드 버스트는 어떻게 작동합니까?

서로 다른 귀속기는 서로 다른 방식으로 작동하지만, React는 어떤 귀속기를 사용하든지 여러 가지 방법으로 귀속을 맞춤형으로 만들 수 있다.

동적 가져오기

아마도 React에서 코드를 분할하는 가장 간단한 방법은 동적 '가져오기' 문법을 사용하는 것일 것이다.일부 귀속기는 동적 가져오기 문장을 로컬로 해석할 수 있지만, 다른 귀속기는 설정이 필요합니다.동적 가져오기 구문은 정적 사이트 생성 및 서버 측 렌더링에 적용됩니다.
동적 가져오기then 함수를 사용하여 필요한 코드만 가져옵니다.가져온 코드에 대한 모든 호출은 이 함수 안에 있어야 합니다.

import("./parseText").then(parseText => {
  console.log(parseText.count("This is a text string", "text"));
});

응용 프로그램에서 사용하는 단일 번들은 두 개의 개별 블록으로 나눌 수 있습니다.
저희 최초 노선 코드를 맡은 분.
코드가 사용되지 않은 두 번째 블록 포함
동적 가져오기를 사용하여 보조 블록의 로드를 지연시키거나 필요에 따라 로드할 수 있습니다.예를 들어 블록을 구성하는 코드는 사용자가 버튼을 누르거나 특정 조건을 실행할 때만 불러올 수 있습니다.

React 를 사용합니다.게으르다

반응을 보이다.lazy는 많은 상하문에서 가져오는 것을 지연시킬 수 있습니다.반응lazy 함수는 의존항을 동적으로 가져오고 코드에서 이 의존항을 구성 요소로 보여 줍니다.그 다음에 타성 구성 요소는 궁금증 구성 요소에 나타나야 합니다. 궁금증 구성 요소는 타성 구성 요소가 불러오는 동시에 반환 내용을 반영하는 데 도움이 됩니다.

import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

예비(fallback) 도구는 어셈블리를 로드할 때 나타나는 React의 모든 요소를 수용할 수 있습니다.서스펜스 모듈은 게으른 모듈 위에 놓을 수 있습니다.그 밖에 여러 개의 타성 부품은 하나의 궁금증 부품으로 포장할 수 있다.

import React, { Suspense } from 'react';
const ComponentOne = React.lazy(() => import('./ComponentOne'));
const ComponentTwo = React.lazy(() => import('./ComponentTwo'));
function MyComponent() {
   return (
      <div><Suspense fallback={<div>Loading...</div>}>
         <ComponentOne />
         <ComponentTwo />
      </div>
   );
}

루트 기반 코드 분리: 코드에서 코드 분리가 어려울 수 있고 패키지는 고르게 분리할 수 있어 사용자 체험을 개선할 수 있다.

import React from 'react';
import Suspense from 'react';
import lazy from 'react';
import {Route, Switch, BrowserRouter } from 'react-router-dom';
const HomeComponent = lazy(() => import('./routes/HomeComponent'));
const BlogComponent = lazy(() => import('./routes/BlogComponent'));
const App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <BrowserRouter> 
      <Switch>
         <Route path={"/home"}>
            <HomeComponent />
         </Route>
         <Route path={"/blog"}>
            <BlogComponent />
         </Route>
         <Route path="/">
            <Redirect to={"/home"} />
         </Route>
      </Switch> 
    </BrowserRouter>
  <Suspense/>
);

명명 출구

반응을 보이다.lazy는 현재 기본 내보내기만 지원합니다.이름을 사용하여 내보낸 모듈을 가져오려면 기본값으로 다시 내보낸 중간 모듈을 만들어야 합니다.이것은 나무가 흔들리는 작업을 확보하고 사용하지 않은 부품이 끌어들이지 않도록 한다.

// Components.js
export const Component = /* ... */;
export const UnusedComponent = /* ... */;
// Component.js
export { Component as default } from "./Components.js";
As both React.lazy and Suspense are not available for rendering on the server yet now, it is recommended to use https://github.com/gregberge/loadable-components for code-splitting in a server-rendered app (SSR). React.lazy is helpful for rendering dynamic import as a regular component in client-rendered app (CSR).
Magic Comment at import()
import(
  /* webpackChunkName: "test", webpackPrefetch: true */
  "LoginModal"
)
// or
import(
  /* webpackChunkName: "test" */
  /* webpackPrefetch: true */
  "LoginModal"
)
// spacing optional
"webpackChunkName" : Using this magic comment we can set name for the js chunk that is loaded on demand.

웹 패키지에서 프리페치

import(/* webpackPrefetch: true */ "...")

이 '자원 알림' 은 브라우저에 이것은 미래에 일부 내비게이션에 사용할 자원이 필요할 수도 있다는 것을 알려 준다.
브라우저는 보통 빈 상태에서 이 자원을 가져옵니다.자원을 가져오면 HTTP 캐시에 저장하여 미래의 요구를 충족시킬 수 있습니다.여러 프리페치 프롬프트가 대기열에 추가되어 유휴 상태일 때 표시됩니다.브라우저를 프리페치할 때 유휴 상태에서 벗어나면 진행 중인 검색을 취소하고 일부 응답을 캐시에 넣고 내용 범위 헤더를 계속 사용하며 프리페치 대기열 처리를 중지할 수 있습니다.
요컨대: 한가할 때 찾기.

웹 패키지에서 미리 로드

import(/* webpackPreload: true */ "...")

이 "자원 알림"은 브라우저에 이 내비게이션에 꼭 필요한 자원이지만 나중에 발견될 것이라고 알려 줍니다.Chrome은 로드한 지 3초 만에 리소스가 사용되지 않을 경우 경고를 인쇄할 수도 있습니다.
브라우저는 일반적으로 레이아웃이 막히는 것이 아니라 중간 우선 순위로 이 자원을 가져옵니다.
요컨대 이전에 발견한 것처럼 정상적으로 물건을 찾다.

You may see a linting error that says:
Parsing error: 'import' and 'export' may only appear at the top level.
This is due to the fact that the dynamic import syntax is still in the proposal stage and has not been finalized. Although webpack already supports it, the settings for ESLint (a JavaScript linting utility) used by Glitch has not been updated to include this syntax yet, but it still works!

본문은 여기까지입니다. 당신이 유용한 것들을 배울 수 있기를 바랍니다.따라서 어떤 생각이나 건의가 있으면 언제든지 아래에 논평을 해 주십시오.가능한 한 이 글에 박수를 많이 쳐서 당신의 사랑을 나누는 것을 잊지 마세요.
너는 나와 함께 갈 수 있다. Github, Facebook.
즐거움 코드👨‍💻 🎊.