webpack按需加载体积还是太大，该怎么办啊？

Question

同志们，项目需要实现按需加载来减小首次加载的时间。
没有使用按需加载之前是这样的情况：
antd,echarts等等第三方库都放在vendor中，最后生成的app.js大约1.6M,vendor.js大约4M。

项目中使用的插件比较多，使用webpack-bundle-analyzer分析工具看了一下，其中antd,echarts,lodash,moment比较大。

PS:以下的效果都是在我的本地执行的，没有使用gzip，所以整体看起来会比没有按需加载之前要大。

目前我的解决方案如下：
1：antd使用官网的按需加载，
2：react-router和webpack结合的按需加载
3：使用new webpack.IgnorePlugin(/^./locale$/, /moment$/)处理了moment是有效的

webpack配置如下:
entry入口:

entry: {
        vendor: ['react','react-dnd',
            'react-dnd-html5-backend','react-dom','react-fetch','react-redux','react-router',
            'superagent','react-router-redux','redux','redux-react-fetch','redux-thunk',
            'history','isomorphic-fetch','js-cookie',
            'lodash','moment','pubsub-js'],
        app: "./src/index",
    }

因为想实现antd的按需加载，所以我没有把antd放到vendor中，echarts-for-react等其他的插件因为用到的地方不是很多，所以也没有放到vendor中。

antd按需加载的配置：

{
      test: /\.js$/,
      loader: require.resolve('babel-loader'),
      options: {
                  plugins: [
                      ['import', { libraryName: 'antd', style: true }],
                  ]
               },
      exclude: /node_modules/,
      include: __dirname
}

我测试过antd的按需加载，应该是可以的。我的项目目录结构如下：

这里有一个问题:
1：使用react-router懒加载，只能对部分有路由的组件进行懒加载，像是component中的组件就只能全部打到app中了。
2：然后antd的按需加载把component中引用的组件全都打包了，导致antd打出的包一直特别大。

路由配置基本如下：

const CodeView = (location, callback) => {
    require.ensure([], require => {
        callback(null, require('./containers/code-files/code-view'))
    }, 'code-view')
};
<Route name="codeView" breadcrumbName="代码查看" path="code-view" getComponent={CodeView}/>

按需加载没有完全实现，这时候再使用webpack-bundle-analyzer分析，结果如下，感觉太乱了：
高亮和代码编辑器单独打的包:

app.js内容，我把echarts拿出去了，太大了。

vendor.js内容，echarts放进来了。

还有一个整体情况:

内容有点多，请耐心查看。
打包效果太差了，我是不是哪里写的有问题啊？
刚刚发现高亮这种多个地方用到的插件被重复打包了好几次:(

Answer 1

提取一个vendor.js出来

import 'es6-promise';
import 'react';
import 'react-dom';
import 'prop-types';
import 'react-router';

import 'core-js/library/modules/es6.promise'

// moment还有大量locales文件，待优化
import 'moment';

// lodash
import 'lodash.clonedeep'
import 'lodash.isfunction'

import 'jquery-param'
import 'isomorphic-fetch'
import 'redux-saga'
import 'dva';

//  抽取antd组件及样式
import 'antd/lib/table'
import 'antd/lib/table/style'

import 'antd/lib/select'
import 'antd/lib/select/style'

import 'antd/lib/date-picker'
import 'antd/lib/date-picker/style'

import 'antd/lib/calendar'
import 'antd/lib/calendar/style'

import 'antd/lib/form'
import 'antd/lib/form/style'

import 'antd/lib/transfer'
import 'antd/lib/transfer/style'

import 'antd/lib/modal'
import 'antd/lib/modal/style'

import 'antd/lib/input'
import 'antd/lib/input/style'

import 'antd/lib/tabs'
import 'antd/lib/tabs/style'

import 'antd/lib/tooltip'
import 'antd/lib/tooltip/style'

import 'antd/lib/upload'
import 'antd/lib/upload/style'

import 'antd/lib/popconfirm'
import 'antd/lib/popconfirm/style'

import 'antd/lib/layout'
import 'antd/lib/layout/style'

import 'antd/lib/row'
import 'antd/lib/row/style'

import 'antd/lib/col'
import 'antd/lib/col/style'

import 'antd/lib/switch'
import 'antd/lib/switch/style'

import 'antd/lib/collapse'
import 'antd/lib/collapse/style'

import 'antd/lib/card'
import 'antd/lib/card/style'

import 'antd/lib/steps'
import 'antd/lib/steps/style'

import 'antd/lib/tree'
import 'antd/lib/tree/style'

import 'antd/lib/cascader'
import 'antd/lib/cascader/style'

import 'antd/lib/tag'
import 'antd/lib/tag/style'

import 'antd/lib/message'
import 'antd/lib/message/style'

// 下面这种方式居然不行。。。
// import {Table, Select, DatePicker, Calendar, Form, Transfer, Modal, 
//     Input, Tooltip, Upload, Layout, Row, Col, Tabs, Popconfirm, Menu, message, Dropdown } from 'antd'

// 富文本框
import 'react-quill-img-upload/dist/react-quill.min'
import 'react-quill-img-upload/dist/quill.snow.css';

然后roadhog配置一下

 "entry": {
    "common": "./src/vendor.js",
    "app": "./src/index.js",
  },
  multipage: true,
  

应该就会小很多，不知道对你有帮助没

Answer 2

and-mobile 我使用了CDN

Answer 3

最终解决完成以后，使用gzip能再压缩50%以上

Answer 4

您好，问题解决了嘛