웹팩 게으름 로드 원리 실현 및 게으름 로드 최적화 프로젝트 어떻게 사용

참고: 명확하고 이해하기 쉽습니다. 먼저 이것을 보십시오. 웹팩의 비동기적 로드 원리와 하도급 정책 웹팩의 게으른 로드 코드 원리 해석:https://segmentfault.com/a/1190000020233387
자신의 이해를 적은 것이고, 잘못된 점이 있으면 평론가의 토론을 환영합니다.
게으름뱅이의 원리는 웹 패키지의 코드 분할을 이용하여 다른 방식으로 코드를 가져오는 것이다.
웹 패키지 해석이 의존할 때, 비동기적으로 불러오는 불러오는 방식을 만나면 이 코드를 단독 js 파일로 분할하고, 동적 가져오려고 할 때 웹 패키지는 스크립트 탭을 만들어서 브라우저가 비동기적으로 js 파일을 가져오도록 요청합니다.
첫 화면 불러오기를 최적화할 수 있습니다. 웹 패키지는 기본적으로 하나의 버블 파일만 생성할 수 있기 때문입니다. 그러나 불러오기를 게을리한 후에 일부 코드를 후속으로 다시 불러오는 js 파일로 분할하여 주요 버블의 부피를 줄이고 불러오는 시간을 가속화합니다.
어떻게 해야만 비동기적으로 코드를 가져올 수 있습니까?

import(’’) import ‘./xxx'을(를) ()=>import('lazyComponent.js'로 변경).n(data=>console.log(data)ES의 제안으로 프로미스를 되돌려줍니다. 가져온 모듈은 then에서 함수로 가져오고 괄호로 묶어서 현재는 컴파일을 통해서만 사용할 수 있습니다. 그리고 babel은 이러한 비동기적인 방식을 해석하기 위해 플러그인을 도입해야 합니다. babel-plugin-syntax-dynamic-import입니다.사용 방법babelrc에 "plugins": ["syntax-dynamic-import"]

require.ensure () 웹 패키지는 컴파일할 때 코드의 Require를 정적으로 분석합니다.ensure (), 분리된chunk에 리퀘스트 모듈을 추가합니다.이 새 Chunk는 웹 패키지에서 jsonp를 통해 필요에 따라 불러옵니다.

주의:es6 모듈 게으름뱅이와 Tree-shaking 호환성 Tree-shaking은 정적 도입 방식만 해석할 수 있기 때문에 동적 도입의 import('')는 필요에 따라 불러오거나 사용하지 않았는지 해석할 수 없습니다. 필요에 따라 도입하려고 가방을 모두 포장하는 상황이 발생할 수 있습니다.이를 위해 import(''') 동적 로드에서 제3자 의존을 가져온 후 필요에 따라 로드하는 상황을 처리하지 않는 것이 좋다. 이런 것이 있으면 자신의 구성 요소 모듈을 가져오고 모듈 내에 필요에 따라 로드와 정적 인용 의존을 가져오면 정상적으로 도입할 수 있다.
예를 들면:

//           join  ，      lodash    。
 setTimeout(import(/* webpackChunkName: "ladash" */'lodash-es').then(_ => {
     
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  }), 1000)

——————————————————————————————————————

로딩 게으름 방식

사실 직접 import('')이나 Require.ensure는 분할 코드의 게으름 불러오는 수요에 도달할 수 있지만 코드의 미관이 건장하다는 이유로 이미 제공된 게으름 불러오는 구성 요소,react-loadable 또는React를 사용할 수 있다.lazy () 등등.
1、React.레이지 콜라보레이션.Suspense. React.lazy는 import을 사용하여 구성 요소를 불러오기를 게으르게 합니다. import은 웹 패키지에서 최종적으로babel은 리퀘스트를 호출하는 것으로 해석됩니다.Ensure 방법은 js 파일을 요청하기 위해 script를 동적으로 삽입합니다.

const Foo = React.lazy(() => import('../componets/Foo));
React.lazy      ，    React.suspense，suspence         ，  loading   。

<React.Suspense fallback={
     <div>loading...</div>}>
    <Foo/>
</React.Suspense>

2. react-loadable 플러그인 사용 방법:https://www.npmjs.com/package/react-loadable

import Loadable from 'react-loadable';
import Loading from './my-loading-component';
 
const LoadableComponent = Loadable({
     
  loader: () => import('./my-component'),
  loading: Loading,
});
 
export default class App extends React.Component {
     
  render() {
     
    return <LoadableComponent/>;
  }
}

3. 그림에 대한 게으름 피우기.브라우저에 요소가 뷰 창 내에 있는지 확인할 수 있는 API: IntersectionObserver가 새로 도입되었습니다.이벤트 리셋의 매개 변수는 IntersectionObserverEntry의 집합으로 보이는 뷰포트에 대한 일련의 값 중 entry를 대표합니다.isIntersecting은 대상 요소가 표시되는 것을 나타냅니다.

const observer = new IntersectionObserver((changes) => {
     
  // changes:       
  changes.forEach((change) => {
     
    // intersectionRatio
    if (change.isIntersecting) {
     
      const img = change.target
      img.src = img.dataset.src
      observer.unobserve(img)
    }
  })
})

observer.observe(img)