webpack and react按需載入

摘要： 原理：CommonJS與import() 方法一：CommonJS模組語法 利用require.ensure,require.ensure()是webpack特有的，已經被import()取代。 方法 require.ensure( dependencie...

原理：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')

demo

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;

react-router中使用按需載入

demo地址 ，此處配合create-react-app使用，自己配置webpack合理需要配置 output.fileName 和 output.chunkFilename

方法一：使用react.lazy

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>
);

檢視程式碼

方法二：利用高階元件

• 寫一個高階元件用於動態載入元件

// 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;
}

檢視程式碼

• 引用並使用該高階元件做按需載入

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