Webpack Erstellen einer großen Datei mit kleinem Projekt

Question

Ich habe mein Webpack eine große main.js-Datei (1,7 MB) mit einem kleinen Projekt von ~ 20-30 Dateien weniger als 100 Zeilen generieren. Die Abhängigkeiten erforderlich sind gering an Zahl (Reaktion, Fluxible) und ich jede optimize Plugin verwende ich verstehen kann:

module.exports = { 
    output: { 
    path: './build', 
    publicPath: '/public/', 
    filename: '[name].js' 
    }, 
    debug: false, 
    devtool: 'eval', 
    target: 'web', 
    entry: [ 
    'bootstrap-sass!./bootstrap-sass.config.js', 
    './client.js', 
    ], 
    stats: { 
    colors: true, 
    reasons: false 
    }, 
    resolve: { 
    extensions: ['', '.js'], 
    alias: { 
     'styles': __dirname + '/src/styles', 
     'components': __dirname + '/src/scripts/components', 
     'actions': __dirname + '/src/scripts/actions', 
     'stores': __dirname + '/src/scripts/stores', 
     'constants': __dirname + '/src/scripts/constants', 
     'mixins': __dirname + '/src/scripts/mixins', 
     'configs': __dirname + '/src/scripts/configs', 
     'utils': __dirname + '/src/scripts/utils' 
    } 
    }, 
    module: { 
    loaders: [ 
     { test: /\.css$/, loader: 'style!css' }, 
     { test: /\.js$/, exclude: /node_modules/, loader: require.resolve('babel-loader') }, 
     { test: /\.json$/, loader: 'json-loader'}, 
     { test: /\.(png|svg|jpg)$/, loader: 'url-loader?limit=8192' }, 
     { test: /\.(ttf|eot|svg|woff|woff(2))(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?name=/[name].[ext]"}, 
     { test: /\.scss$/, 
     loader: ExtractTextPlugin.extract('style-loader', 
      'css!sass?outputStyle=expanded&' + 
      "includePaths[]=" + 
      (path.resolve(__dirname, "./node_modules")) 
     ) 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.NoErrorsPlugin(), 
    new webpack.ProvidePlugin({ 
     $: "jquery", 
     jQuery: "jquery", 
     "windows.jQuery": "jquery" 
    }), 
    new ExtractTextPlugin("[name].css", {allChunks: true}), 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.UglifyJsPlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.AggressiveMergingPlugin() 
    ], 

}; 

Was mache ich falsch oder wo kann ich weiterhin die Größe der Datei verbessern?

Answer 1

Sie sollten mindestens

plugins: [ 
    new webpack.DefinePlugin({ 
    'process.env': { 
     // This has effect on the react lib size 
     'NODE_ENV': JSON.stringify('production'), 
    } 
    }), 
    ... 
], 

gesetzt, die wesentlich mit Reagieren helfen.

Zusätzlich ist die Einstellung devtool auf source-map in der Produktionsumgebung vorzuziehen. Weitere Informationen finden Sie unter official documentation.

Sie könnten versuchen, die Ausgabe mit the analyse tool zu überprüfen. Um den JSON zu erhalten, müssen Sie etwas wie machen und dann das stats.json an das Tool übergeben. Das könnte dir einen Einblick geben.

Answer 2

Ich habe meine Reaktion runter von 2,1mb herunter auf 160kb gezippt, nur indem ich die Dinge hier (Devtools: 'source-map'), mit Uglifyjs mit den Standardeinstellungen (ohne gzip es ist etwa 670kb).

Es ist wahrscheinlich nicht dass groß, aber zumindest ist es nicht mehr verrückt.

Für die Nachwelt hier ist mein webpack config:

// webpack.config.js 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'source-map', 
    entry: [ 
     'webpack-dev-server/client?http://127.0.0.1:2992', 
     'webpack/hot/only-dev-server', 
     './js/main' 
    ], 
    output: { 
     path: './out/', 
     filename: 'main.js', 
     chunkFilename: '[name]-[chunkhash].js', 
     publicPath: 'http://127.0.0.1:2992/out/' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /(node_modules|bower_components)/, 
       loaders: ['react-hot', 'babel?optional=runtime&stage=0&plugins=typecheck'] 
      } 
     ] 
    }, 
    progress: true, 
    resolve: { 
     modulesDirectories: [ 
      'js', 
      'node_modules' 
     ], 
     extensions: ['', '.json', '.js'] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin(), 
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       // This has effect on the react lib size 
       'NODE_ENV': JSON.stringify('production'), 
      } 
     }), 
     new webpack.optimize.UglifyJsPlugin() 
    ] 
}; 

Answer 3

Sie können auch einen Blick auf Webpack Bundle Analyzer nehmen.

Es stellt Bündelinhalt als bequeme interaktive zoombare treemap dar.