通过排除制作Webpack 4较小的供应商JS软件包

Question

试图缩小我的JS文件。已经使用terser很有帮助，但是app.js约为600kb，manifest.js为4kb，vendor.js为2.5MB。我正在尝试将供应商分成较小的包装。

我的方法是将vendor.js分成较小的部分，是将React，Redux和React Router分成一个reactVendor.js。我在utilityVendor.js中使用的其他库。然后将其余的依赖项简化为vendor.js。 （app.js和manifest.js将保持不变）。

这是我的下面配置，它不起作用。它不是在创建vendor.js，而是将其他所有内容都放到了app.js中，这是我绝对不希望的。

我基本上是在尝试创建reactVendor.js和utilityVendor.js，然后将其中没有的内容放入vendor.js：

optimization: {
    minimizer: [new TerserPlugin()],
    runtimeChunk: {
        name: 'manifest'
    },
    splitChunks: {
        cacheGroups: {
            reactVendor: {
                test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom|react-router-hash-link|react-redux|react-router-redux|redux|redux-form|redux-thunk)[\\/]/,
                name: 'reactVendor',
                chunks: 'all',
                enforce: true
            },
            utilityVendor: {
                test: /[\\/]node_modules[\\/](axios|bootstrap|file-saver|lodash|moment|react-dropzone|reactstrap)[\\/]/,
                name: 'utilityVendor',
                chunks: 'all',
                enforce: true   
            },
            vendor: {
                test: /[\\/]node_modules[\\/]!(react|react-dom|react-router-dom|react-router-hash-link|react-redux|react-router-redux|redux|redux-form|redux-thunk|axios|bootstrap|file-saver|lodash|moment|react-dropzone|reactstrap)[\\/]/,
                name: 'vendor',
                chunks: 'all',
                enforce: true
            },
        }
    }
},

此外，我还试图将@react-pdf/renderer添加到utilityVendor.js中，而'/'导致正则表达式出现问题。不确定如何处理。