Webpack疑问：压缩后的jQuery为何比官方版大近20KB？

嗨，我来帮你拆解下这个问题～ 你遇到的情况其实很常见，核心原因是官方jQuery的压缩包不是单纯用Uglify直接压缩源码生成的，而是经过了多步定制化预处理（比如移除调试代码、剔除未使用的模块、合并优化逻辑），再做压缩。而你直接压缩npm里的完整jQuery源码，自然会比官方包大。另外，你直接套用官方Grunt的Uglify配置没用，是因为他们的输入文件已经是预处理后的精简版，和你用的完整源码完全不一样。

下面给你几个针对性的解决办法，亲测能大幅缩小压缩后的体积：

1. 升级到TerserWebpackPlugin（推荐） #

UglifyJSPlugin已经是比较旧的工具了，它不支持ES6+语法，压缩效率和效果都不如它的升级版terser-webpack-plugin（Webpack 4+默认用这个）。先安装它：

npm install terser-webpack-plugin --save-dev

然后替换你Webpack配置里的压缩插件：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      _: 'underscore', 
      Backbone: 'backbone' 
    })
  ],
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true, // 并行压缩提升速度
        sourceMap: true,
        terserOptions: {
          // 开启激进压缩选项
          compress: {
            dead_code: true, // 移除死代码
            drop_console: true, // 移除console语句（如果不需要的话）
            drop_debugger: true, // 移除debugger
            unused: true, // 移除未使用的变量/函数
            pure_funcs: ['console.log', 'console.debug'], // 强制移除指定函数调用
            passes: 3 // 多轮压缩，让Terser做更多优化
          },
          mangle: {
            toplevel: true, // 混淆顶层变量和函数名（大幅缩小体积）
            reserved: ['$', 'jQuery'] // 必须保留这两个全局变量，避免ProvidePlugin失效
          },
          output: {
            comments: false, // 移除所有注释
            beautify: false // 禁用美化输出，保持最小体积
          }
        }
      })
    ]
  }
};

2. 如果坚持用UglifyJSPlugin，调整配置 #

如果你暂时不想换插件，给你的UglifyJSPlugin加上这些参数：

new UglifyJSPlugin({
  parallel: true,
  sourceMap: true,
  uglifyOptions: {
    compress: {
      dead_code: true,
      drop_console: true,
      drop_debugger: true,
      unused: true,
      pure_funcs: ['console.log'],
      passes: 2
    },
    mangle: {
      toplevel: true,
      reserved: ['$', 'jQuery']
    },
    output: {
      comments: false
    }
  }
})

3. 额外优化：直接引入官方min版 #

如果你的项目不需要修改jQuery源码，最简单的办法就是直接引入官方的压缩版，跳过自己压缩的步骤：

// 在Webpack配置里修改resolve别名
resolve: {
  alias: {
    'jquery': 'jquery/dist/jquery.min.js'
  }
}

这样Webpack会直接打包官方的85KB版本，省去了自己压缩的麻烦，还能保证体积最小。

为什么其他插件也有体积差异？ #

和jQuery的情况类似，很多插件的npm包包含了源码、注释、调试代码，而官方发布的压缩版已经做了预处理。上面的压缩配置同样适用于这些插件，开启激进压缩后就能缩小和官方包的体积差。

内容的提问来源于stack exchange，提问作者King Julien