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

    目前由H5集成开发的app小应用越来越来多，即在在一个原生的app平台下集成很多由web页面构成的小应用，因此我们可能在一个工程下开发多个小应用，部署整个工程之后，由原生端通过openWebview打开相关的路由，为了打开一个web应用时不附加别的应用的代码，不妨试试下面的js文件代码：

一、安装bundle-loader依赖

npm install --save-dev bundle-loader

webpack相关配置如下：

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实现代码拆分按需加载(下)