目前由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,打开浏览器可以看到按需加载的效果。