webpack 项目中的 bundle.js 太大答案

【问题标题】：bundle.js too big in webpack projectwebpack 项目中的 bundle.js 太大
【发布时间】：2026-01-14 12:50:01
【问题描述】：

我正在尝试创建一个 react + babel + webpack 项目。它可以工作，但 bundle.js 文件有 950KB 大。

bundle.js 总是那么大吗？如果没有，我该如何减小尺寸？

这是我的 webpack.config.js：

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
entry: APP_DIR + '/index.jsx',
output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
},
plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
],
module : {
    loaders : [
      {
        test : /\.jsx?/,
        loader : 'babel',
        query:
        {
            presets: ["es2015", 'react']
        }
      }
    ]
}
};

module.exports = config;

【问题讨论】：

是的。捆绑包将根据您的依赖关系增长。 webpack 将使用 import 打包所有依赖项。替代方式，您可以在部署时尽可能为依赖项使用 CDN，并使用 babel 将 ES6 转换为 ES5 用于您的反应组件。
它也总是取决于你捆绑的库。您还可以尝试在供应商库和您的应用程序代码之间拆分捆绑包。这样，客户端可以缓存供应商，而不必再次下载它一段时间。您还可以使用 Webpack dll 方法，该方法可以在之后拆分并加快编译速度（如果您使用的是 hmr 之类的工具）

标签： javascript reactjs webpack frontend babeljs

【解决方案1】：

这在很大程度上取决于您的依赖关系。您可以忽略 ie8 并删除您的依赖项以减少一些 kB：

var config = {
  entry: APP_DIR + '/index.jsx',
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true,
        warnings: false
      },
      mangle: {
        screw_ie8: true
      },
      output: {
        comments: false,
        screw_ie8: true
      }
    })
  ]
};

【讨论】：

【解决方案2】：

通常包含很多依赖项，因此这种大小并不少见。生成捆绑包时尝试使用以下标志：

--optimize-minimize - 缩小捆绑包

--optimize-occurrence-order - 优化块 ID

--optimize-dedupe - 重复删除相同的代码段

更多关于主题here。

【讨论】：

【解决方案3】：

我有 webpack 6.0.1，最近发现 webpack 的 documentation 已更改。我对 webpack.config.js 进行了测试、使用并可以提出以下配置思路。您可以尝试这些想法并减小包大小：

//webpack.config.js
module.exports = {
  ...
  devtool: 'cheap-module-source-map',
  ...
  plugins : [
    ...
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.HashedModuleIdsPlugin({
      hashFunction: 'sha256',
      hashDigest: 'hex',
      hashDigestLength: 4
    }),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],

  ...

  optimization: {
    namedModules: false,
    namedChunks: false,
    nodeEnv: 'production',
    flagIncludedChunks: true,
    occurrenceOrder: true,
    sideEffects: true,
    usedExports: true,
    concatenateModules: true,
    splitChunks: {
      cacheGroups: {
        commons: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all'
        }
      },
      minSize: 30000,
      maxAsyncRequests: 5,
      maxAsyncRequests: 3,      
    },
    noEmitOnErrors: true,
    minimize: true, 
    minimizer: [
      // we specify a custom UglifyJsPlugin here to get source maps in production
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          compress: false,
          ecma: 6,
          mangle: true
        },
        sourceMap: true
      })
    ],
    removeAvailableModules: true,
    removeEmptyChunks: true,
    mergeDuplicateChunks: true,    
  },
...
}

评论：

webpack.optimize.ModuleConcatenationPlugin() - 连接范围将所有模块合并到一个闭包中，并允许您的代码具有在浏览器中更快的执行时间
webpack.HashedModuleIdsPlugin() - 导致哈希基于模块的相对路径，生成四个字符串为模块 ID
webpack.optimize.OccurrenceOrderPlugin() - 改变 id 的分布以获得经常使用的最小 id 长度身份证
webpack.NoEmitOnErrorsPlugin() - 跳过发射阶段每当编译时出现错误。这确保没有发出包含错误的资产

【讨论】：

【解决方案4】：

您可以随时尝试使用 javascript“缩小”工具。它压缩优化你的代码。在 google 上搜索 javascript minify。

【讨论】：