React-router4는 webpack require.ensure와 협력하여 비동기 로딩을 구현합니다(자세한 튜토리얼).

이 글에서는 비동기 로딩을 구현하기 위해 webpack require.ensure를 사용한 React-router4의 예를 주로 소개합니다. webpack의 require.ensure 구현

첫 번째는 require.ensure를 사용하는 것이고,

두 번째는 로더를 사용하여 구현하는 것입니다.

오늘은 번들 로더를 사용하여 구현하는 방법에 대해 이야기하겠습니다. 코드가 더 우아해졌습니다.

먼저 번들 로더를 설치해야 합니다. npm을 사용할지, 아니면 Yarn을 사용할지는 어떤 패키지 관리를 사용하는지에 따라 다릅니다.

bundle.js가 필요합니다

import React, { Component } from 'react';
export default class Bundle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mod: null
    };
  }

  componentWillMount() {
    this.load(this.props);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.load !== this.props.load) {
      this.load(nextProps);
    }
  }

  load(props) {
    this.setState({
      mod: null
    });
    props.load(mod => {
      this.setState({
        mod: mod.default ? mod.default : mod
      });
    });
  }

  render() {
    return this.state.mod ? this.props.children(this.state.mod) : null;
  }
}

그런 다음 Bundle.js를 가져오고 비동기식이어야 하는 파일도 가져옵니다. 단, 그 앞에

bundle-loader?lazy&name=[name]!

를 추가해야 합니다. 예:

import Bundle from './components/bundle.js';
import ListComponent from 'bundle-loader?lazy&name=[name]!./file/List.jsx';

다음은 다음과 같습니다. 라우팅 추가 구성 :

<Route path="/list" component={List} />

및 출력을 구성하는 ChunkFilename

chunkFilename: '[name]-[id].[chunkhash:4].bundle.js'

chunkFilename을 구성한 후 비동기로 로드되는 파일 이름은 위의 명명 방법에 따라 표시됩니다. 웹팩에서 생성된 번호입니다.

위 구성이 완료되면 이제 번들을 사용할 차례입니다. 경로에 구성된 구성요소가 List에 해당하므로 목록을 작성해야 합니다.

const List = (props) => (
  <Bundle load={ListComponent}>
    {(List) => <List {...props}/>}
  </Bundle>
);

위 내용은 제가 모두를 위해 편집한 내용입니다. 앞으로는 모두에게 도움이 될 것입니다.

관련 기사:

JS를 사용하여 워터폴 플로우 플러그인 구현 방법

JS에서 html을 pdf로 변환하는 기능 구현 방법

JS를 사용하여 페이스트보드 복사 기능 구현 방법

JS에서 구현하는 방법 오프셋 및 균일 애니메이션 구현

Bootstrap에서 테이블 병합 셀을 구현하는 방법

JavaScript에서 선택 드롭다운 상자의 첫 번째 값을 가져오는 방법

방법 AngularJS 비밀번호로 실시간으로 가져와 표시하세요

위 내용은 React-router4는 webpack require.ensure와 협력하여 비동기 로딩을 구현합니다(자세한 튜토리얼).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!