React-router4는 webpack require.ensure와 협력하여 비동기 로딩을 달성합니다.

이 글은 비동기 로딩을 보장하기 위해 webpack require와 함께 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을 구성한 후 비동기적으로 로드되는 파일 이름은 다음과 같이 표시됩니다. 위의 명명 방법에 따르지 않으면 Configuration은 webpack에서 생성된 번호입니다.

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

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

이 시점에서 구성은 다음과 같습니다. 이때 로컬에서 서비스를 재시작하고 해당 경로를 클릭하면 비동기적으로 기록된 js를 볼 수 있습니다: List-0.094e.bundle.js

관련 권장 사항:

사용에 대한 자세한 설명 데이터의 비동기 로딩을 구현하는 DataTable 플러그인

JavaScript 파일 동기화 및 비동기 로딩을 구현하는 방법에 대한 설명

JavaScript가 비동기 로딩 구현 방법을 해결하는 방법 요약

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