将供应商文件拆分为多个块，动态加载

Question

我的供应商文件越来越大（接近1mb）。我有一个主要的捆绑包文件，该文件分成多个小块，并根据页面的需要动态地加载到每个页面上。有没有一种方法可以实现此供应商文件？理想情况下，我只需要在我的html中包含bundle.js和vendor.js（像现在一样），所有块都将动态加载。

我正在使用react，redux和react-router从bundle中创建块（require.ensure）。我试图命名一些我想分开的软件包，但这是无法维护的。

我当前的webpack配置：

dev: {
        mode: 'development',
        entry: {
          bundle: './<%= paths.src %>/javascripts/react/containers/Root',
        },
        output: {
          path: path.join(__dirname, '<%= paths.dist %>/javascripts'),
          filename: '[name].js',
          chunkFilename: '[name]-chunk.js',
          publicPath: '/intl/javascripts/'
        },
        devtool: 'cheap-module-source-map',
        optimization: {
          nodeEnv: 'development',
          mergeDuplicateChunks: true,
          removeEmptyChunks: true,
          occurrenceOrder: true,
          concatenateModules: true,
          runtimeChunk: 'single',
          splitChunks: {
            cacheGroups: {
              vendor: {
                name: 'vendor',
                test: /[\\/]node_modules[\\/]/,
                chunks: 'initial',
                reuseExistingChunk: true
              },
            }
          }
        },
        module: {
          rules: [
            {
              test: /\.js$/,
              exclude: /node_modules/,
              include: __dirname,
              use: {
                loader: 'babel-loader'
              }
            },
            {
              test: /\.ya?ml$/,
              loader: 'yml-loader'
            }
          ]
        },
        performance: {
          hints: false
        }
      }