webpack 如何拆分庞大的js文件，并行加载？

Question

问题：
已经使用了CommonsChunkPlugin拆分代码，但不知为何只能有效拆分两个js出来。

 new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            minChunks: function (module) {
                return module.context && module.context.indexOf("node_modules") !== -1;
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "antd",
            minChunks: function (module) {
                return module.context && module.context.indexOf("antd") !== -1;
            }
        }),
        //new webpack.optimize.CommonsChunkPlugin({
        //    name: "react",
        //    minChunks: function (module) {
        //        return module.context && module.context.indexOf("react") !== -1;
        //    }
        //}),
        //new webpack.optimize.CommonsChunkPlugin({
        //    name: "echarts",
        //    minChunks: function (module) {
        //        return module.context && module.context.indexOf("echarts") !== -1;
        //    }
        //}),

如上述代码，能有效拆分出来的代码只有vector和antd。注释掉react和echarts的配置，是因为哪怕拆分出react.js和echarts.js，这两个文件也只有几KB。也就是没有被“有效拆分”。
现在项目编译后有这么几个文件：

我希望能把vector文件，甚至是已经拆分出来的antd文件，做进一步的拆分，使单个文件更小，有效利用浏览器的并行加载。
请问该怎么做呢？

webpack.prod.config.js

const webpack = require('webpack');
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: [
        "babel-polyfill",
        path.join(process.cwd(), "app/index.js")
    ],
    output: {
        path: path.join(process.cwd(), "dist"),
        filename: "[name].[chunkhash].js",
        chunkFilename: "[name].[chunkhash].chunk.js",
        publicPath: "/",
        //filename: "bundle.js",
    },

    module: {
        rules: [
            {
                test: /\.json$/,
                use: 'json-loader'
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader?cacheDirectory=true',

                }
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|gif|eot|svg|ttf|woff|woff2)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'url-loader?limit=1024&name=images/[name].[ext]',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            }
        ]
    },
    plugins: [
       
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify("production")
            }
        }),
       
        new HtmlWebpackPlugin({template: "public/index.html"}),

        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            minChunks: function (module) {
                return module.context && module.context.indexOf("node_modules") !== -1;
            }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: "antd",
            minChunks: function (module) {
                return module.context && module.context.indexOf("antd") !== -1;
            }
        }),
        
    ],


}

Answer 1

因为文件的下载速度可能不是影响你的真正原因，真正原因是文件太大，导致evalute script 时间很长，所以根本思路应该是分部加载，也就是你先把页面加载出来，再将echart加载出来，下面我的文章，就是解决这个问题，可以看一下
https://segmentfault.com/a/11...

Answer 2

我也正在纠结这个问题...
同求大神解答.........