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

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

0 голосов
/ 13 сентября 2018

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

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

extract-text-webpack-plugin@4.0.0-beta.0 file-loader@2.0.0 html-webpack-plugin@3.0.0 webpack@4.6.0 webpack-dev-server@1.16.2 webpack-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 Далее, что я могу сделать, чтобы эти результаты были как минимум такими же, как у веб-пакета 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()
  ])
});
...