请教您一个关于Router按需加载的问题

[Shinepans]

基于React Router 4.1 和 webpack 3、redux，如何做代码分片呢？ 以前是在getComponent里面调用这个参数实现的：

require.ensure([], require => {
    let foo = require('./foo');
    reducerRegistry.register({foo: foo}); // 一个导入redux action的策略（使用分片）
    cb(null, require('./PageCom'))
}, 'PageCom');

这是之前的策略，现在我把这个redux加进去，能给点建议吗？

[Molin123]

router4已经不支持require.ensure了。可以参考https://juejin.im/post/58f9717e44d9040069d06cd6

[BruceCham]

@Molin123 router4 参考你写的文档，能实现，但打包后文件很大，没有实用价值，用法跟文档写的一样，不知道你这边有没有实战过

[Molin123]

文件很大？请把数据贴出来看一下，查一下原因。或者把代码发给我我给你看一下。

[BruceCham]

不好意思，好像是g2这块的问题，我还在看，把代码换成普通的就正常了，如果是如下代码，打包出来很大

大体的代码如下： components 代码

import createG2 from 'g2-react'
import { Stat } from 'g2'
import React, { Component } from 'react'

const Chart = createG2(chart => {
  chart.col('month', {
    alias: '月份',
    range: [0, 1]
  })
  chart.col('temperature', {
    alias: '平均温度(°C)'
  })
  chart.line().position('month*temperature').size(2)
  chart.render()
})
class MyComponent extends React.Component {
  state = {
    data: [
      { month: 'Jan', temperature: 7.0 },
      { month: 'Feb', temperature: 6.9 },
      { month: 'Mar', temperature: 9.5 },
      { month: 'Apr', temperature: 14.5 },
      { month: 'May', temperature: 18.2 },
      { month: 'Jun', temperature: 21.5 },
      { month: 'Jul', temperature: 25.2 },
      { month: 'Aug', temperature: 26.5 },
      { month: 'Sep', temperature: 23.3 },
      { month: 'Oct', temperature: 18.3 },
      { month: 'Nov', temperature: 13.9 },
      { month: 'Dec', temperature: 9.6 }
    ],
    forceFit: true,
    width: 500,
    height: 450
  }
  render() {
    return (
      <div>
        <Chart
          data={this.state.data}
          width={this.state.width}
          height={this.state.height}
          forceFit={this.state.forceFit} />
      </div>
    )
  }
}

export default MyComponent

router调用

import { Bundle } from '@/utils'
import DataBoard from 'bundle-loader?lazy!@/containers/DataBoardContainer'

const List = () => (
  <Bundle load={DataBoard}>
    {(List) => <List />}
  </Bundle>
)

[Molin123]

如果发现某个模块打包后过大的话，可以把它单独拆分出来。

[Shinepans]

Thanks a lot all of you.