Почему приложение для Webpack ReactJS настолько велико?

Question

Я следил за множеством советов, которые можно найти в упаковке моего приложения Webpack ReactJS для производства. К сожалению, размер файла по-прежнему составляет 3 МБ. Что я делаю не так?

Вот мой Webpack Конфигурационный файл:

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

module.exports = { 
    devtool: 'cheap-module-eval-source-map', 
    entry: [ 
    'webpack-hot-middleware/client', 
    './index' 
    ], 
    output: { 
    path: path.join(__dirname, 'dist'), 
    filename: 'bundle-webpack.js', 
    publicPath: './' 
    }, 
    plugins: [ 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.HotModuleReplacementPlugin(), 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('production') 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     screw_ie8: true, 
     warnings: false 
     } 
    }) 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loaders: [ 'babel' ], 
     exclude: /node_modules/, 
     include: __dirname 
     }, 
     { 
     test: /\.css$/, 
     loader: "style-loader!css-loader" 
     }, 
     {test: /node_modules\/react-chatview/, loader: 'babel' } 
    ] 
    } 
} 

Любая помощь будет принята с благодарностью!

Я использую следующую команду, чтобы упаковать его:

> NODE_ENV=production webpack -p 

я получаю следующий результат:

bundle-webpack.js 3.1 MB  0 [emitted] main 

Best,

Аарон

Answer 1

Итак, оказывается, что Дэвид Л. Уолш был прав, что у меня было слишком много вещей для разработки в моем приложении. Однако предоставленный ответ не разрешил проблему.

Я решил проблему, используя 3 шага.

1. Удалите все плагины «горячей перезагрузки» из моей конфигурации веб-пакета, как объяснил Дэвид.
2. Удалите горячий перезагружаемый плагин «реакция-преобразование» из моего файла .babelrc.
3. Изменить параметр «devtool» на «источник-карта» от «дешевого-модуля-Eval-источник-карты»

После выполнения этих шагов, конечный файл расслоение был 340Кбом в то время как карта источника была еще 3MB. К счастью, мне не нужно включать исходную карту в мое приложение, поэтому ее можно загрузить со скоростью 340 КБ, которая по-прежнему довольно велика, но разумна для современных браузеров, работающих на современных интернет-соединениях.

Я бы проголосовал за Дэвида, но пока у меня недостаточно очков репутации, чтобы сделать это.

Answer 2

Похоже, что вы до сих пор там было много средств, например, замена горячего модуля.

Посмотрите на webpack.config.prod.js по адресу React Transform Boilerplate в качестве руководства.

Вы также можете оптимизировать свой импорт, включив только те части пакетов, которые вам нужны, и оставив остальное. См.: Reduce Your bundle.js File Size By Doing This One Thing.