详解react-router4 异步加载路由两种方法

方法一：我们要借助bundle-loader来实现按需加载。

首先，新建一个bundle.js文件：

import React, { Component } from 'react'export default class Bundle extends React.Component {  state = {    // short for "module" but that's a keyword in js, so "mod"    mod: null  }  componentWillMount() {    this.load(this.props)  }  componentWillReceiveProps(nextProps) {    if (nextProps.load !== this.props.load) {      this.load(nextProps)    }  }  load(props) {    this.setState({      mod: null    })    props.load((mod) => {      this.setState({        // handle both es imports and cjs        mod: mod.default ? mod.default : mod      })    })  }  render() {    if (!this.state.mod)      return false    return this.props.children(this.state.mod)  }}

然后，在入口处使用按需加载：

// ...// bundle模型用来异步加载组件import Bundle from './bundle.js';// 引入单个页面（包括嵌套的子页面）// 同步引入import Index from './app/index.js';// 异步引入import ListContainer from 'bundle-loader?lazy&name=app-[name]!./app/list.js';const List = () => (  <Bundle load={ListContainer}>    {(List) => <List />}  </Bundle>)// ...  <HashRouter>    <Router basename="/">      <div>        <Route exact path="/" component={Index} />        <Route path="/list" component={List} />      </div>    </Router>  </HashRouter>// ...webpack.config.js文件配置output: {  path: path.resolve(__dirname, './output'),  filename: '[name].[chunkhash:8].bundle.js',  chunkFilename: '[name]-[id].[chunkhash:8].bundle.js',},

方法二：用原生的

Webpack 配置

首先在 webpack.config.js 的 output 内加上 chunkFilename

output: {  path: path.join(__dirname, '/../dist/assets'),  filename: 'app.js',  publicPath: defaultSettings.publicPath,  // 添加 chunkFilename  chunkFilename: '[name].[chunkhash:5].chunk.js',},

name 是在代码里为创建的 chunk 指定的名字，如果代码中没指定则 webpack 默认分配 id 作为 name。

chunkhash 是文件的 hash 码，这里只使用前五位。

在路由页面

这里写的是旧的没按需要加载的路由写法

ReactDOM.render( (  <Router history={browserHistory}>   {/* 主页 */}   <Route path="/" component={App}>    {/* 默认 */}    <IndexRoute component={HomePage} />    {/* baidu */}    <Route path="/baidu" component={BaiduPage}>     <Route path="result" component={BaiduResultPage} />     <Route path="frequency" component={BaiduFrequencyPage} />    </Route>    {/* 404 */}    <Route path='/404' component={NotFoundPage} />        {/* 其他重定向到 404 */}    <Redirect from='*' to='/404' />   </Route>  </Router> ), document.getElementById('app'));