react按需加载(getComponent优美写法),并指定输出模块名称解决缓存(getComponent与chunkFilename)...

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'
},

转载于:https://www.cnblogs.com/little-ab/p/6991721.html