webpackプロジェクトでbundle.jsが大きすぎます

Question

私はreact + babel + webpackプロジェクトを作成しようとしています。 は動作しますが、bundle.jsファイルのサイズは950KBです。

はbundle.jsはいつも大きいですか？ もしそうでなければ、私はどのようにサイズを減らすのですか？

これは私のwebpack.config.jsです：

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

var BUILD_DIR = path.resolve(__dirname, 'src/client/public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
entry: APP_DIR + '/index.jsx', 
output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
}, 
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 : /\.jsx?/, 
     loader : 'babel', 
     query: 
     { 
      presets: ["es2015", 'react'] 
     } 
     } 
    ] 
} 
}; 

module.exports = config; 

Answer 1

主にあなたの依存関係によって異なります。あなたはie8を無視して依存関係をなくし、いくつかのkBを削ることができます：

var config = { 
    entry: APP_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }), 
    new webpack.optimize.OccurrenceOrderPlugin(), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     screw_ie8: true, 
     warnings: false 
     }, 
     mangle: { 
     screw_ie8: true 
     }, 
     output: { 
     comments: false, 
     screw_ie8: true 
     } 
    }) 
    ] 
}; 

Answer 2

あなたはいつものjavascript "縮小化" ツールを使用しようとすることができます。 コードを圧縮して圧縮します。 Googleでjavascript minifyを検索してください。

Answer 3

通常、多くの依存関係が含まれているため、このサイズは珍しくありません。チャンクIDは

--optimize-dedupeを最適化します - - Minifiesは

--optimize-occurrence-orderバンドル -

--optimize-minimize話題here上

もっとコードの同じ部分を重複排除：あなたのバンドルを生成するときに、次のフラグを使用してみてください。