Webpack 用小项目创建大文件的网页包

我的网页包生成了一个大的main.js文件（1.7mb），其中有一个小项目，每个项目大约20-30个文件，少于100行。所需的依赖项数量很少（React、Fluxible），我正在使用我能理解的每个优化插件：

module.exports = {
  output: {
    path: './build',
    publicPath: '/public/',
    filename: '[name].js'
  },
  debug: false,
  devtool: 'eval',
  target: 'web',
  entry: [
  'bootstrap-sass!./bootstrap-sass.config.js',
  './client.js',
  ],
  stats: {
    colors: true,
    reasons: false
  },
  resolve: {
    extensions: ['', '.js'],
    alias: {
      'styles': __dirname + '/src/styles',
      'components': __dirname + '/src/scripts/components',
      'actions': __dirname + '/src/scripts/actions',
      'stores': __dirname + '/src/scripts/stores',
      'constants': __dirname + '/src/scripts/constants',
      'mixins': __dirname + '/src/scripts/mixins',
      'configs': __dirname + '/src/scripts/configs',
      'utils': __dirname + '/src/scripts/utils'
    }
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: 'style!css' },
      { test: /\.js$/, exclude: /node_modules/, loader: require.resolve('babel-loader') },
      { test: /\.json$/, loader: 'json-loader'},
      { test: /\.(png|svg|jpg)$/, loader: 'url-loader?limit=8192' },
      { test: /\.(ttf|eot|svg|woff|woff(2))(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?name=/[name].[ext]"},
      { test: /\.scss$/,
        loader: ExtractTextPlugin.extract('style-loader',
          'css!sass?outputStyle=expanded&' +
          "includePaths[]=" +
          (path.resolve(__dirname, "./node_modules"))
          )
      }
    ]
  },
  plugins: [
    new webpack.NoErrorsPlugin(),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "windows.jQuery": "jquery"
    }),
    new ExtractTextPlugin("[name].css", {allChunks: true}),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.AggressiveMergingPlugin()
  ],

};

---

我做错了什么，或者在哪里可以进一步改进文件的大小

您至少应该设置

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      // This has effect on the react lib size
      'NODE_ENV': JSON.stringify('production'),
    }
  }),
  ...
],

这将大大有助于反应

此外，在生产环境中，最好将

devtool

设置为

sourcemap

。有关更多信息，请参阅

---

您可以尝试使用检查输出。要获得它期望的JSON，您需要执行类似于

webpack--JSON>stats.JSON

的操作，然后将该

stats.JSON

传递给该工具。这可能会给你一些启示。

我的反应从2.1mb下降到160kb gzip，只需在这里做一些事情（devtools:“源地图”），使用默认设置的uglifyjs（没有gzip，它最终大约是670kb）

可能没那么好，但至少不再疯狂了

为了子孙后代，这里是我的网页配置：

// webpack.config.js
var webpack = require('webpack');

module.exports = {
    devtool: 'source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:2992',
        'webpack/hot/only-dev-server',
        './js/main'
    ],
    output: {
        path: './out/',
        filename: 'main.js',
        chunkFilename: '[name]-[chunkhash].js',
        publicPath: 'http://127.0.0.1:2992/out/'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loaders: ['react-hot', 'babel?optional=runtime&stage=0&plugins=typecheck']
            }
        ]
    },
    progress: true,
    resolve: {
        modulesDirectories: [
            'js',
            'node_modules'
        ],
        extensions: ['', '.json', '.js']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new webpack.DefinePlugin({
            'process.env': {
                // This has effect on the react lib size
                'NODE_ENV': JSON.stringify('production'),
            }
        }),
        new webpack.optimize.UglifyJsPlugin()
    ]
};

---

你也可以看看

---

它将捆绑内容表示为方便的交互式可缩放树形图。

是的，我肯定会看一看，看看它如何影响代码。另外，我发现了我的错误，我建议将其添加到答案中，我在做

devtools:true

，这导致我的文件很大，而对于生产来说，它不需要为true。酷，我添加了这一点。完全忘记了

devtool

。另一种用于webpack捆绑包分析的命令行工具：我的项目产生的文件大小与您的类似，同样也不疯狂，但我的网站上几乎没有任何内容，因此我希望文件大小仍然更小。我正在连接它；检查其中的package.json，查看您的项目是否也使用了可能占用大量空间的内容：我为我的prod版本打开了HotModuleReplacementPlugin