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;

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