从webpack 2.7迁移到4.1.1，注意到业绩不佳

Question

我有一个相当大的vue js项目，我试图从webpack 2.7迁移到最后的4.1.1版本。我设法让它工作，但最后的捆绑比以前更大。我不明白为什么。

先于

 app.bundle.js  2.72 MB       0  [emitted]  [big]  main

后

app.bundle.js  4.48 MiB       0  [emitted]  [big]  main

这是我的常用配置：

var LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
var path = require('path')
var webpack = require('webpack')

// Don't display loaders deprecation in the npm run console.
process.noDeprecation = true

function resolve(dir) {
  return path.resolve(__dirname, dir)
}

module.exports = {
  entry: ["babel-polyfill", './app/main.js'],
  output: {
    path: resolve('./app'),
    publicPath: '/app/',
    filename: 'app.bundle.js'
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          'scss': 'vue-style-loader!css-loader!postcss-loader!sass-loader',
          'sass': 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax'
        }
      }
    }, {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      'query': {
        'plugins': ['lodash'],
        'presets': ['es2015']
      }
    }, {
      test: /\.css$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader']
    }, {
      test: /\.scss$/,
      loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
    },
    {
      test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
      loader: 'url-loader?limit=10000'
    }]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'core': resolve('app/components/core/'),
      'common': resolve('app/components/common/'),
      'public': resolve('app/components/public/'),
      'private': resolve('app/components/private/'),
      styles: path.resolve(__dirname, 'app')
    },
    extensions: ['.js', '.vue', '.json', '.scss'],
    modules: [resolve('./app'), 'node_modules']
  },

  performance: {
    hints: false
  },

  plugins: [new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    Tether: "tether",
    "window.Tether": "tether",
    "_": 'lodash',
    Popper: ['popper.js', 'default'],
    Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
    Button: "exports-loader?Button!bootstrap/js/dist/button",
    Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
    Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
    Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
    Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
    Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
    Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
    Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
    Util: "exports-loader?Util!bootstrap/js/dist/util",
  }), new LodashModuleReplacementPlugin({
    caching: true
  }), new webpack.optimize.OccurrenceOrderPlugin,
  new webpack.DefinePlugin({
    MAX_UPLOAD_FILE_SIZE: 5242880,
    COPYRIGHT: "2018"
  })]
}

这是我的prod配置：

const common = require('./webpack.common.js');
const merge = require('webpack-merge');
var webpack = require('webpack');

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

module.exports = merge(common, {
  mode: 'production',
  devtool: '#source-map',
  plugins: [
    new OptimizeCssAssetsPlugin(),
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    }),
  ]
})

我还尝试添加优化：

optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'commons',
          chunks: 'all',
          minChunks: 2,
          enforce: true
        }
      }
    }
  }

但结果一样..。

我遗漏了什么？谢谢!

Answer 1

您是在研究开发还是生产模式包的大小？在我的经验中，到目前为止，开发模式构建的规模更大，它们没有在dev中优化大小，而是在优化编译/重新编译速度，因此我认为他们在v4中进行了权衡(我的dev包构建速度快了1.7倍)。

如果您的产品构建(下面有uglifyjs )更大，那么这是值得关注的。

尝试将uglifyjs添加到生产模式构建中：

yarn add uglifyjs-webpack-plugin --dev

const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin');

config = {
  ...,
  optimization: {
    minimization: [
      new UglifyJsWebpackPlugin({
        parallel: true,
        sourceMap: <true/false>,
      })
    ],
  },
}