webpack+react-router实现代码拆分按需加载(上)

    目前由H5集成开发的app小应用越来越来多，即在在一个原生的app平台下集成很多由web页面构成的小应用，因此我们可能在一个工程下开发多个小应用，部署整个工程之后，由原生端通过openWebview打开相关的路由，为了打开一个web应用时不附加别的应用的代码，不妨试试下面的js文件代码：
一、安装bundle-loader依赖
npm install --save-dev bundle-loaderwebpack相关配置如下：
module: {
rules: [
{
test: /\.(js|jsx)$/,
include: path.resolve(__dirname,"./src/modules/**/"),
use: [
{
loader: "bundle-loader",
options: {
  lazy: true,
name: '[name]'
}
}
]
}
]
}二、定义一个高阶组件（HOC）import React, {Component} from 'react'

class Bundle extends Component {
constructor(props) {
super(props);
this.state = {
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({
mod: mod.default ? mod.default : mod
})
})
}

render() {
if (!this.state.mod)
return false;
return this.props.children(this.state.mod)
}
}

export default function lazy(lazyClass) {
return function Wrapper(props) {
return <Bundle load={lazyClass}>
{(Clazz) => <Clazz {...props} />}
</Bundle>
}
}三、路由相关配置import BindInfo from 'bundle-loader?lazy&name=userBind-chunk!../modules/userBind/info/Info';

import Bundle from './Bundle'；

<Route path='userBind'>
<IndexRoute component={Bundle(UserBind)}/>
<Route path="info/:id"  component={Bundle(BindInfo)}/>
</Route>

四、正常进行webpack打包操作时可以看到代码已经拆分成了数个chunk.js,打开浏览器可以看到按需加载的效果。

webpack+react-router实现代码拆分按需加载(中)

webpack+react-router实现代码拆分按需加载(下)