React TypeScript размер блока Webpack - PullRequest
Новая
       53

React TypeScript размер блока Webpack

0 голосов
/ 02 августа 2020

Я пытался уменьшить размер кусков, но безрезультатно. Я использую 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,
            }),
        ],
    }

и это результат, который я получаю

введите описание изображения здесь

Только один огромный кусок. Что я делаю не так? и как уменьшить размер и увеличить количество чанков?

спасибо

1 Ответ

0 голосов
/ 02 августа 2020

Может ты неправильно настроил. Все файлы 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('@', '')}`;
          },
        },
      },
    },
  }
...