方法一：我們要借助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 是在代碼里為創(chuàng)建的 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'));