react配合webpack进行按需加载的方法很简单，Route的component改为getComponent，组件用require.ensure的方式获取，并在webpack中配置chunkFilename。
const chooseProducts = (location, cb) => { require.ensure([], require => { cb(null, require('../Component/chooseProducts').default) },'chooseProducts') } const helpCenter = (location, cb) => { require.ensure([], require => { cb(null, require('../Component/helpCenter').default) },'helpCenter') } const saleRecord = (location, cb) => { require.ensure([], require => { cb(null, require('../Component/saleRecord').default) },'saleRecord') } const RouteConfig = ( <Router history={history}> <Route path="/" component={Roots}> <IndexRoute component={index} />//首页 <Route path="index" component={index} /> <Route path="helpCenter" getComponent={helpCenter} />//帮助中心 <Route path="saleRecord" getComponent={saleRecord} />//销售记录 <Redirect from='*' to='/' /> </Route> </Router> );
旧写法<Route path="movieSearch/:keyWord"
getComponent={
(nextState, callback)=> {
require.ensure([], (require)=> {
callback(null, require("../containers/MovieSearchContainer.js").default)
}, "movieSearch")
}
}
/>
require-ensure
- 说明: require.ensure在需要的时候才下载依赖的模块，当参数指定的模块都下载下来了（下载下来的模块还没执行），便执行参数指定的回调函数。require.ensure会创建一个chunk，且可以指定该chunk的名称，如果这个chunk名已经存在了，则将本次依赖的模块合并到已经存在的chunk中，最后这个chunk在webpack构建的时候会单独生成一个文件。
- 语法:
require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])- dependencies: 依赖的模块数组
- callback: 回调函数，该函数调用时会传一个require参数
- chunkName: 模块名，用于构建时生成文件时命名使用
- 注意点：requi.ensure的模块只会被下载下来，不会被执行，只有在回调函数使用require(模块名)后，这个模块才会被执行。
output: {
path: path.resolve(__dirname, 'dist'),
// filename应该比较好理解，就是对应于entry里面生成出来的文件名
filename: 'bundle.js',
// 为了做代码的异步加载,所有文件都以/代替根目录转换，即输入/就会自动转为根目录
// “publicPath”项则被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值,解决Link标签里的to用绝对路径问题
publicPath:'/',
// chunkname我的理解是未被列在entry中，却又需要被打包出来的文件命名配置。
// 在按需加载（异步）模块的时候,CommonJS的方式异步加载模块：require.ensure() API，
//异步加载的模块是要以文件形式加载哦，所以这时生成的文件名是以chunkname配置的，生成出的文件名，同时解决缓存问题
chunkFilename: '[name]_[chunkhash:8]_chunk.js'
}
