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