Webpack 3 => 4 обновления * увеличено * время сборки и размер пакета ... почему?

Итак, чтобы перейти с webpack 3 на 4, я сделал следующие шаги:

  1. обновить пакеты npm:

extract-text-webpack-plugin@4.0.0-beta.0file-loader@2.0.0html-webpack-plugin@3.0.0webpack@4.6.0webpack-dev-server@1.16.2webpack-cli@3.1.0

  1. Добавить режим

mode: 'production'

  1. удалить плагины

    plugins: [ ...,
         new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false,
            comparisons: false
          },
          output: {
            comments: false,
            ascii_only: true
          },
          sourceMap: shouldUseSourceMap
        }),
        new webpack.optimize.CommonsChunkPlugin({name: 'vendor', minChunks: Infinity}),
        new webpack.optimize.DedupePlugin(), ...]
    
  2. добавить настройки оптимизации

    optimization: {
            minimize: true,
            splitChunks: {
              name: 'vendor',
              minChunks: Infinity
            },
            minimizer: [
              new UglifyJsPlugin({
                cache: true,
                parallel: true,
                uglifyOptions: {
                  compress: {
                    warnings: false,
                    comparisons: false
                  },
                  output: {
                    comments: false,
                    ascii_only: true
                  },
                  sourceMap: shouldUseSourceMap
                }
              })
            ]
          }
    

Неутешительные результаты:

Время сборки:

1min 25s => 1min 35s

Размеры файлов:

// Webpack 3 Build Sizes
File sizes after gzip:

  353.43 KB  build/assets/js/app.51b35332b3f2b8c48450.js
  173.97 KB  build/assets/js/vendor.0f41e4590665fc120169.js
  123.01 KB  build/server/server.js
  20.13 KB   build/assets/css/app.465ba7fe.css

// Webpack 4 Build Sizes
File sizes after gzip:

  516.09 KB   build/assets/js/app.a4fd9dfc5b50361f1055.js
  172.46 KB  build/assets/js/vendor.9ac185907e33a607f6b4.js
  86.05 KB   build/server/server.js
  20.37 KB   build/assets/css/app.css

Q Итак, мой вопрос, любая идея, почему обновление webpack 4 на самом деле УВЕЛИЧИВАЕТ время сборки и размеры файлов?

Q Затем, что я могу сделать, чтобы эти результаты были как минимум такими же, как у webpack 3?

Я нашел несколько форумов об уменьшении времени и размера, но я перепробовал многие из них и не уверен, как я получил эти результаты.

Полная конфигурация для справки

const merge = require('webpack-merge');
const cssFilename = require('./rules').cssFilename;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const paths = require('../paths');
const webpack = require('webpack');
const appConfig = require('../AppConfig');
const conf = appConfig();
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

const baseConfig = require('./webpack.base');
const server = require('./webpack.server');
const AssetsPlugin = require('assets-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

const client = merge.smart(baseConfig, {
  mode: 'production',
  bail: true,
  output: {
    path: paths.appBuild,
    filename: 'assets/js/[name].[chunkhash].js',
    chunkFilename: 'assets/js/[name].[chunkhash:8].chunk.js',
    publicPath: `${conf.assetsPath}/`
  },
  module: {
    strictExportPresence: true,
    rules: require('./rules').default('production')
  },
  optimization: {
    minimize: true,
    splitChunks: {
      name: 'vendor',
      minChunks: Infinity
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: {
            warnings: false,
            comparisons: false
          },
          output: {
            comments: false,
            ascii_only: true
          },
          sourceMap: shouldUseSourceMap
        }
      })
    ]
  },
  plugins: baseConfig.plugins.concat([
    new ExtractTextPlugin({
      filename: cssFilename
    }),
    new AssetsPlugin({
      path: path.resolve(paths.appBuild, 'assets')
    }),
    new ManifestPlugin({
      fileName: 'assets/webpack-manifest.json'
    }),
    new HtmlWebpackPlugin({
      inject: false,
      template: `!!raw-loader!${paths.appHtml}`,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeRedundantAttributes: true,
        useShortDoctype: true,
        removeEmptyAttributes: true,
        removeStyleLinkTypeAttributes: true,
        keepClosingSlash: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true
      }
    }),
    new webpack.optimize.AggressiveMergingPlugin()
  ])
});

удалите это правило splitChunks, а также добавьте mode = production, посмотрите, что произойдет.

PlayMa256 13.09.2018 21:27

Сейчас я добавлю правило splitChunks и посмотрю :), я добавил режим, но забыл добавить в пост, хороший улов !!

Kevin Danikowski 13.09.2018 21:28

удаление splitchunks не изменило размер, я добавил свою полную конфигурацию для справки

Kevin Danikowski 13.09.2018 21:35

это интересно ... если бы вы могли создать небольшой воспроизводимый пример, было бы неплохо открыть проблему в их репозитории ...

PlayMa256 13.09.2018 21:37

Я действительно внес эти изменения в два репозитория, и оба получили одинаковый результат, но у этого был больший увеличенный размер пакета.

Kevin Danikowski 13.09.2018 21:40

попробуйте 'exclude' prop w value 'node_modules' ... module.rules.test {. * js} webpack.js.org/configuration/module/#rule-exclude

Robert Rowntree 13.09.2018 21:44

К сожалению, @RobertRacentree, это не изменило время сборки или что-то еще

Kevin Danikowski 13.09.2018 22:20

@KevinDanikowski вы нашли решение? что было исправлением?

Sunil Kumar Singh 21.09.2020 15:41

@SunilKumarSingh Поскольку это было 2 года назад, я полагаю, что это было исправлено, но я не припомню, чтобы когда-либо находил исправление, однако я использую NextJS и впечатлен его упрощением, и я считаю, что он использует webpack 4 за кулисами.

Kevin Danikowski 21.09.2020 18:13
0
9
574
0

Другие вопросы по теме