Question

因此，要从Webpack 3升级到4，我需要执行以下步骤：

更新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

添加模式

mode: 'production'

删除插件

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(), ...]

添加优化设置

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()
  ])
});

Webpack 3 => 4升级增加构建时间和捆绑包大小...为什么？

0 个答案:

Webpack 3 => 4升级*增加*构建时间和捆绑包大小...为什么？

0 个答案:

Webpack 3 => 4升级增加构建时间和捆绑包大小...为什么？