Redux: वेबपैक बहुत बड़े बंडल को संकलित करता है।जेएस (उदाहरण के लिए)

प्रति से कुछ भी गलत नहीं है, उदाहरण सिर्फ उत्पादन के लिए कॉन्फ़िगर नहीं किए गए हैं। रखरखाव के बोझ से बचने के लिए हम यहां ऐसा करने की संभावना नहीं रखते हैं - कृपया उत्पादन कॉन्फ़िगरेशन के उदाहरणों के लिए फुलर वेबपैक बॉयलरप्लेट से परामर्श लें।

कम से कम आप इसे उत्पादन में करना चाहेंगे:

• devtool को 'eval' से 'source-map' बदलें
• webpack.DefinePlugin को process.env.NODE_ENV से 'production'
• न्यूनतमीकरण के लिए webpack.optimize.UglifyJsPlugin जोड़ें
• सुनिश्चित करें कि आप NODE_ENV=production साथ बेबेल को कॉल करते हैं, इसलिए .babelrc react-transform सक्षम नहीं करता है

एक विशिष्ट वेबपैक उत्पादन विन्यास इस तरह दिख सकता है:

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 होना चाहिए। हमें कई अनुरोधों से बचने के लिए एक घटक के टेम्पलेट/सीएसएस/जेएस को एक साथ बंडल करना चाहिए, लेकिन इसे मांग पर लोड करना चाहिए।

केवल source-map बजाय devtool रूप में inline-source-map होने से स्रोत मानचित्र (आश्चर्य) इनलाइन डालकर आउटपुट फ़ाइल को बल्क किया जाएगा। जाहिर है, लेकिन मैंने इसे नजरअंदाज कर दिया और मुझे यह पता लगाने में एक घंटे का समय लगा, इसलिए मैं इसे भविष्य के सामान्य संदर्भ के लिए यहां रख रहा हूं