使用build版本运行时，首次加载子页面，性能非常差，页面打开需要将近20s

[amyhuangxbd]

1. Network 可以看到chunfile的size有700kb

2. 关于route 配置及 import 的npm包如下： A, routes/index.js `export default { path: '/recruit/',

   component: require('COMPONENT/App').default,

   indexRoute: { component: require('COMPONENT/Welcome').default },

   childRoutes: [ // 路由按模块组织分离，避免单文件代码量过大 require('./demand').default, require('./interview').default, require('./executive').default, require('./login').default, require('./logout').default,

   // 强制“刷新”页面的 hack { path: 'redirect', component: require('COMPONENT/Redirect').default },

   // 无路由匹配的情况一定要放到最后，否则会拦截所有路由 { path: '*', component: require('COMPONENT/404').default } ] }`

B: routes/demand.js `import { injectReducer } from 'REDUCER' // 用户访问拦截器 import createContainer from 'UTIL/createContainer'

const connectComponent = createContainer( ({ userData, demand, requirement, executive }) => ({ userData, demand, requirement, executive }), // mapStateToProps require('ACTION/executive').default // mapActionCreators )

export default { path: '/recruit/executive',

/ 布局基页 / getComponent (nextState, cb) { require.ensure([], (require) => { // 立即注入 Reducer injectReducer('executive', require('REDUCER/executive/').default)

  cb(null, require('VIEW/executive').default)
}, 'executiveView')

},

indexRoute: { // 对应 /executive getComponent (nextState, cb) { require.ensure([], (require) => { cb(null, connectComponent(require('COMPONENT/Executive/').default)) }, 'index') } },

childRoutes: [ ] } `

C: components/Demand/index.js import React, { Component } from 'react' import dateTimeFormatter from 'UTIL/dateTimeFormatter' import handleChange from 'MIXIN/handleChange' import { Link } from 'react-router' import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table' import 'react-date-picker/index.css' import { DateField } from 'react-date-picker'

问题：build时，是如何生成chunkfile，为什么chunkfile会这么大？

[kenberkeley]

推荐使用 https://github.com/th0r/webpack-bundle-analyzer 进行分析

[kenberkeley]

当然同时请别忘了开启 gzip 压缩