方法一：我們要借助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'));我們需要讓路由動態加載組件，需要將 component 換成 getComponent
ReactDOM.render( ( <Router history={browserHistory}> {/* 主頁 */} <Route path="/" component={App}> {/* 默認 */} <IndexRoute component={HomePage} /> {/* baidu */} <Route path="/baidu" getComponent(nextState, cb) { require.ensure([], (require) => { cb(null, require('components/layer/HomePage')) }, 'HomePage')}> <Route path="result" getComponent... /> <Route path="frequency" getComponent... /> </Route> {/* 404 */} <Route path='/404' getComponent... /> {/* 其他重定向到 404 */} <Redirect path='*' onEnter: (_, replaceState) => replaceState(null, "/404") /> </Route> </Router> ), document.getElementById('app'));getComponent
對應于以前的 component 屬性，但是這個方法是異步的，也就是當路由匹配時，才會調用這個方法。
這里面有個 require.ensure 方法
require.ensure(dependencies, callback, chunkName)
這是 webpack 提供的方法，這也是按需加載的核心方法。第一個參數是依賴，第二個是回調函數，第三個就是上面提到的 chunkName，用來指定這個 chunk file 的 name。
如果需要返回多個子組件，則使用 getComponents 方法，將多個組件作為一個對象的屬性通過 cb 返回出去即可。這個在官方示例也有，但是我們這里并不需要，而且根組件是不能返回多個子組件的，所以使用 getComponent。
當改寫之后，我們需要把這個重定向的路由單獨拆出來，也就是 * 這個路由，我們上面已經為他創建了一個 redirect 目錄。這里使用到 onEnter 方法，然后在這個方法里改變路由狀態，調到另外的路由，實現 redirect ：
/redirect/index.js
module.exports = { path: '*', onEnter: (_, replaceState) => replaceState(null, "/404")}The root route must render a single element
跟著官方示例和上面碼出來之后，可能頁面并沒有渲染出來，而是報 The root route must render a single element 這個異常，這是因為 module.exports 和 ES6 里的 export default 有區別。
如果你是使用 es6 的寫法，也就是你的組件都是通過 export default 導出的，那么在 getComponent 方法里面需要加入.default。
getComponent(nextState, cb) { require.ensure([], (require) => { // 在后面加 .default cb(null, require('components/layer/ReportPage')).default }, 'ReportPage')}如果你是使用 CommonJS 的寫法，也就是通過 module.exports 導出的，那就無須加 .default 了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
