이 글에서는 비동기 로딩을 구현하기 위해 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!