Redux: يجمع Webpack bundle.js ضخمة جدًا (في أمثلة)

لا يوجد شيء خاطئ بحد ذاته ، فالأمثلة ليست مهيأة للإنتاج. من غير المحتمل أن نقوم بهذا هنا لتجنب عبء الصيانة - يرجى الرجوع إلى قوالب Webpack المعيارية الكاملة للحصول على أمثلة لتكوينات الإنتاج.

على الأقل سترغب في القيام بذلك في الإنتاج:

• تغيير devtool من 'eval' إلى 'source-map'
• أضف webpack.DefinePlugin لتعيين process.env.NODE_ENV إلى 'production'
• أضف webpack.optimize.UglifyJsPlugin للتقليل
• تأكد من استدعاء Babel بـ NODE_ENV=production لذا .babelrc لا يُفعِّل react-transform

قد يبدو تكوين إنتاج Webpack النموذجي كما يلي:

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

module.exports = {
  devtool: 'source-map',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  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: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

فيما يلي نموذج معياري يتضمن وضع الإنتاج إذا كنت مهتمًا.

يجب أن تكون أفضل طريقة هي AsyncRoute. يجب علينا تجميع القالب / css / js للمكون معًا لتجنب الطلبات المتعددة ، ولكن تحميله عند الطلب.

سيؤدي وجود devtool كـ inline-source-map بدلاً من source-map إلى زيادة حجم ملف الإخراج عن طريق وضع خريطة المصدر (مفاجأة) مضمنة. من الواضح ، لكني تجاهلت هذا الأمر واستغرق الأمر ساعة لمعرفة ذلك ، لذا سأضعه هنا كمرجع عام في المستقبل