Webpack打包输出Bundle体积超出预期问题求助

兄弟，我太懂你这种困惑了——明明CDN上的jQuery才29.5kb，自己用Webpack打包出来直接飙到86kb，这差距确实让人头疼。我来帮你拆解原因，一步步搞定：

一、先搞懂体积差的根源 #

jsdelivr上的29.5kb是生产环境压缩后的精简版，而你直接写import $ from 'jquery'时，Webpack默认引入的是jQuery的「未压缩开发版源码」，甚至包含了兼容旧浏览器的冗余代码；再加上如果你的压缩配置没生效，体积自然就上去了。

二、快速救急：直接引入压缩版 #

最简单的办法，跳过默认入口，直接引入jQuery的min版：

// 替换你的import语句
import $ from 'jquery/dist/jquery.min.js';

这样Webpack打包的就是已经压缩好的版本，体积会直接接近CDN的大小。

三、规范优化：调整Webpack压缩配置 #

如果不想硬编码min版路径，那得把Webpack的压缩逻辑捋顺：

1. 替换UglifyJsPlugin为TerserPlugin #

UglifyJsPlugin对ES6+语法支持很差，Webpack 4+官方早就推荐用terser-webpack-plugin了，它能更好地压缩现代JS代码，还能一键去除console、debugger这类冗余内容。

先安装插件：

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

然后修改webpack.config.js：

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin'); // 替换成这个

module.exports = {
  mode: 'production', // 一定要加！生产环境会自动开启一堆优化
  entry: './src/js/scripts.js',
  output: {
    publicPath: "./dist/",
    path: path.join(__dirname, "dist/js/"),
    filename: 'bundle.js' // 补全filename，你之前的配置漏了这块
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          compress: {
            drop_console: true, // 可选：去掉console.log
            drop_debugger: true // 去掉debugger语句
          },
          mangle: true, // 混淆变量名
          output: {
            comments: false // 清理所有注释
          }
        }
      })
    ]
  },
  // 其他原有配置...
};

2. 检查Source Map配置 #

如果你的Webpack开启了inline-source-map或者eval-source-map，这些会把Source Map直接嵌入到JS文件里，直接导致体积暴增。生产环境建议关闭Source Map，或者用source-map（生成单独的.map文件，不影响主JS体积）：

module.exports = {
  // ...其他配置
  devtool: 'source-map' // 生产环境推荐，或者直接设为false彻底关闭
};

3. 开启Tree Shaking（生产环境默认生效） #

只要你设置了mode: 'production'，Webpack会自动开启Tree Shaking，去除代码中未被使用的部分。虽然jQuery本身是全局类库，可精简的空间不大，但聊胜于无。

四、终极优化：用externals剥离jQuery #

如果项目允许，你可以把jQuery从打包文件里彻底剥离，直接用CDN引入，这样打包后的JS体积会直接砍掉这部分：

修改webpack.config.js：

module.exports = {
  // ...其他配置
  externals: {
    jquery: 'jQuery' // 告诉Webpack：jQuery是全局变量，不用打包进去
  }
};

然后在HTML里通过CDN引入jQuery：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>

这样你的入口JS里还是能正常import $ from 'jquery'，但打包后的bundle里不会包含jQuery代码，体积直接降下来。

内容的提问来源于stack exchange，提问作者Filip Petrovic