roadhog打包过大

维护之前的项目，使用的antd pro，当时antd依赖roadhog来构建，打包时发现打出的包很大。如下：

打完后提示我打包过大，这样的代码部署到服务器之后，浏览器加载首页时，会非常慢，需要分包，下面说一下分包的过程。

主要修改的内容就是.webpackrc.js中的配置：

const path = require('path');

export default {
  entry: {
    index: './src/index.js',
    vendor: [
      'react',
      'react-dom',
      'dva',
      'react-router',
    ],
    antd: [
      'antd/lib/button',
      'antd/lib/icon',
    ],
    components:[ /*组件*/
      './src/components/Login',
    ],
    services: [
      './src/services/dispatchControlServices.js',
    ],
  },
  extraBabelPlugins: [
    ['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
  ],
  env: {
    development: {
      extraBabelPlugins: ['dva-hmr'],
    },
  },
  proxy: {
	  "/api": {
		"target": "http://47.105.88.232",
		"changeOrigin": true,
		"pathRewrite": { "^/api" : "" }
	  }
  },
  alias: {
    components: path.resolve(__dirname, 'src/components/'),
  },
  ignoreMomentLocale: true,
  theme: './src/theme.js',
  html: {
    template: './src/index.ejs',
  },
  disableDynamicImport: true,
  publicPath: '/',
  hash: true,
  commons: [
    {
      names: [
        'vendor', 
        'antd', 
        'components', 
        'services'
      ],
      minChunks: Infinity
    }
  ],
};

主要起作用的配置：

1.entry中新增的'vendor', 'antd',  'components',  'services'；

2.新增commons节点和上面的对应。

打包后的效果：