利用require.ensure,require.ensure()是webpack特有的,已經被import()取代。javascript
方法
java
require.ensure( dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String )
ES2015 loader規範定義了import()方法,能夠在運行時動態地加載ES2015模塊react
方法
webpack
import('Component').then() // or 在 async中使用 await import('Component')
demo
git
import React, { Component } from 'react'; class App extends Component { handleClick = () => { import('./moduleA') .then(({ moduleA }) => { // Use moduleA }) .catch(err => { // Handle failure }); }; render() { return ( <div> <button onClick={this.handleClick}>Load</button> </div> ); } } export default App;
demo地址,此處配合create-react-app使用,本身配置webpack合理須要配置output.fileName和output.chunkFilenamegithub
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import React, { Suspense, lazy } from 'react'; const Program1 = lazy(() => import('./Program1')); const App = () => ( <Router> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route path="/program1" component={Program1}/> </Switch> </Suspense> </Router> );
查看代碼web
// async Component import React, { Component } from "react"; export default function asyncComponent(importComponent) { class AsyncComponent extends Component { constructor(props) { super(props); this.state = { component: null }; } async componentDidMount() { const { default: component } = await importComponent(); this.setState({ component: component }); } render() { const C = this.state.component; return C ? <C {...this.props} /> : null; } } return AsyncComponent; }
查看代碼api
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import asyncComponent from './asyncComponent'; import React, { Suspense } from 'react'; const Progran2 = asyncComponent(() => import("./Program2")); const App = () => ( <Router> <Suspense fallback={<div>Loading...</div>}> <Switch> <Route exact path="/program2" component={Program2}/> </Switch> </Suspense> </Router> );
查看代碼react-router
以上兩種方法都是react官方推薦
code-splittingapp