webpack项目中bundle.js文件过大

Question

我正在尝试创建一个 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;

- Nir Kogman

---

是的。包将根据您的依赖项增长。webpack 将为您打包所有的依赖项，您只需使用 import 导入即可。另一种方法是在部署时使用 CDN 并使用 babel 将您的 react 组件从 ES6 转换为 ES5。 - subash

这完全取决于你打包的库。你也可以尝试将库分为供应商库和应用程序代码两部分。这样，客户端可以缓存供应商库，一段时间内无需再次下载。你还可以使用Webpack dll方法，在编译后进行拆分和加速（如果你正在使用像hmr这样的工具）。 - gretro

Answer 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
      }
    })
  ]
};

- Tholle

Answer 2

通常会包含许多依赖，因此这个大小并不罕见。生成您的Bundle时，请尝试使用以下标志：

--optimize-minimize - 最小化Bundle

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

--optimize-dedupe - 删除相同的代码片段

有关更多信息，请参见此处。

- B Λ R T

Answer 3

我使用的是webpack 6.0.1，最近发现文档已经更改。我测试过并使用了以下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,    
  },
...
}

注释：

1. webpack.optimize.ModuleConcatenationPlugin() - 将所有模块的范围合并到一个闭包中，使您的代码在浏览器中具有更快的执行时间
2. webpack.HashedModuleIdsPlugin() - 使哈希基于模块的相对路径，生成一个四个字符的字符串作为模块ID
3. webpack.optimize.OccurrenceOrderPlugin() - 变化ID的分布以获得经常使用的ID的最小长度
4. webpack.NoEmitOnErrorsPlugin() - 在编译时出现错误时跳过发射阶段。这确保不会发出包含错误的任何资产

- Roman

Answer 4

你可以尝试使用JavaScript的“压缩”工具。 它可以压缩和优化你的代码。 在谷歌上搜索JavaScript压缩工具。

- Gabri T