webpack and react-router按需加載

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