Question

我很擅长使用Webpack，我试图将我在ES6中完成的React应用程序转换为可接受的生产就绪大小。输出文件仍然太大，而且React仍在输出警告（主要是关于生产文件）。

任何人都可以帮我解决我的配置文件中应该更新的内容吗？

这就是我现在所拥有的。

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
  entry: "./app/App.js",
  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  plugins: PROD ? [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: true }
    })
  ] : []
}

Answer 1

以下是我的生产版本插件列表：

plugins: [
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.DedupePlugin(),
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    }
  }),
  new webpack.optimize.UglifyJsPlugin({
    minimize: true,
    compress: {
      unused: true,
      dead_code: true,
      warnings: false,
      screw_ie8: true
    },
    compressor: {
      warnings: false
    }
  })
]

此外，如果您发现应用程序仍然非常庞大，我使用的是 Webpack捆绑包大小分析器（npm.js link）。它将显示按大小排序的已使用依赖项列表，它确实帮助我分析并丢弃了我实际上并不需要的东西。

使用Webpack准备React App Production

1 个答案: