反应打字稿Webpack块大小

Question

我一直在尝试减小块大小，但没有解决方案。我正在使用 happypack、ForkTsCheckerWebpackPlugin、TerserPlugin 作为最小化工具。

对于性能配置，我正在使用

performance: {
        hints: process.env.NODE_ENV === 'production' ? 'error' : false,
        maxEntrypointSize: 200 * KILOBYTES,
        maxAssetSize: 100 * KILOBYTES,
        assetFilter: (fileName) =>
            !fileName.endsWith('.css') && !fileName.endsWith('.scss') && !fileName.endsWith('.map'),
    }

用于优化配置

optimization: {
        runtimeChunk: 'single',
        noEmitOnErrors: true,
        minimize: true,
        splitChunks: {
            cacheGroups: {
                default: false,
                vendors: false,
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module, chunks, cacheGroupKey) {
                        const moduleFileName = module
                            .identifier()
                            .split('/')
                            .reduceRight((item) => item);
                        const allChunksNames = chunks.map((item) => item.name).join('~');
                        return `${cacheGroupKey}-${allChunksNames}-${moduleFileName}`;
                    },
                    chunks: 'all',
                    minChunks: 2,
                    priority: 20
                },
                common: {
                    name: 'common',
                    minChunks: 2,
                    chunks: 'async',
                    priority: 10,
                    reuseExistingChunk: true,
                    enforce: true
                }
            },
        },
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    parse: {
                        ecma: 8
                    },
                    compress: {
                        ecma: 5,
                        warnings: false,
                        inline: 2
                    },
                    mangle: {
                        safari10: true
                    },
                    output: {
                        ecma: 5,
                        comments: false,
                        ascii_only: true
                    },
                },
                cache: true,
                parallel: true,
                sourceMap: isSourceMap,
            }),
        ],
    }

这是我得到的输出

只有一大块。我究竟做错了什么？以及如何减小大小并增加块的数量？

谢谢

Answer 1

可能你配置错了。所有 js 文件都是单个块。 你可以参考我的示例代码：

  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          warnings: false,
          compress: {
            comparisons: false,
          },
          parse: {},
          mangle: true,
          output: {
            comments: false,
            ascii_only: true,
          },
        },
        parallel: true,
        cache: true,
        sourceMap: true,
      }),
    ],
    nodeEnv: 'production',
    sideEffects: true,
    concatenateModules: true,
    runtimeChunk: 'single',
    splitChunks: {
      chunks: 'all',
      maxInitialRequests: 10,
      minSize: 0,
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            const packageName = module.context.match(
              /[\\/]node_modules[\\/](.*?)([\\/]|$)/,
            )[1];
            return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
    },
  }