从 webpack 2.7 迁移到 4.1.1，发现性能不佳答案

【问题标题】：Migrating from webpack 2.7 to 4.1.1, noticed bad performance results从 webpack 2.7 迁移到 4.1.1，发现性能不佳
【发布时间】：2018-03-09 10:21:14
【问题描述】：

我有一个相当大的 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"
  })]
}

这是我的产品配置：

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
        }
      }
    }
  }

但结果相同...

我错过了什么？谢谢！

【问题讨论】：

您是否尝试过查看捆绑包，例如。新捆绑包是否具有外部/内部源映射，或者可能是旧捆绑包被丑化而新捆绑包没有。等等。 IOW：第一步找出捆绑包中的不同之处。
好主意，我马上检查。顺便说一句，在 webpack 4 中，它不应该在生产模式下默认 uglify？
应该做什么，做什么可能不一样。它可能是一个过时的更改配置设置等。你在使用 babel 吗？，这有时会添加相当多的代码。
如果没有webpack.common.js，就很难说。
@BertrandMarron 我也通过添加共同点来更新问题。谢谢！

标签： javascript webpack vue.js

【解决方案1】：

您是否在查看开发模式或生产模式捆绑包的大小？到目前为止，根据我的经验，开发模式构建的大小更大，他们没有针对开发中的大小进行优化，他们正在针对编译/重新编译速度进行优化，所以我认为他们在 v4 中进行了权衡（我的开发包构建大约快 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>,
      })
    ],
  },
}

【讨论】：