webpack and react按需加载

原理：CommonJS与import()方法一：CommonJS模块语法利用require.ensure,require.ensure()是webpack特有的，已经被import()取代。方法require.ensure( dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)方法二：import()ES2015 loader规范定义了import()方法，可以在运行时动态地加载ES2015模块方法import(‘Component’).then()// or 在 async中使用await import(‘Component’)demoimport 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;react-router中使用按需加载demo地址，此处配合create-react-app使用，自己配置webpack合理需要配置output.fileName和output.chunkFilename方法一：使用react.lazyimport { 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>);查看代码方法二：利用高阶组件写一个高阶组件用于动态加载组件// async Componentimport 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;}查看代码引用并使用该高阶组件做按需加载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官方推荐code-splitting