Webpack per la creazione di file di grandi dimensioni con un piccolo progetto

Question

Il mio webpack ha generato un grande file main.js (1.7mb) con un piccolo progetto di ~ 20-30 file inferiore a 100 righe ciascuno. Le dipendenze richieste sono pochi (Reagire, Fluxible) e sto usando tutti i plugin ottimizzare posso capire:

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() 
    ], 

}; 

Che cosa sto facendo di sbagliato o dove posso migliorare ulteriormente le dimensioni del file?

Answer 1

È necessario impostare almeno

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

Che aiuterà notevolmente con Reagire.

Inoltre, l'impostazione di devtool a source-map è preferibile nell'ambiente di produzione. Vedere official documentation per ulteriori informazioni.

Si potrebbe provare a controllare l'output utilizzando the analyse tool. Per ottenere il JSON previsto è necessario fare qualcosa come webpack --json > stats.json e quindi passare lo strumento stats.json allo strumento. Potrebbe darti un po 'di intuizione.

Answer 2

Ho ottenuto la mia risposta da 2.1mb giù a 160kb gzip facendo semplicemente le cose qui (devtools: 'source-map'), usando uglifyjs con le impostazioni predefinite (senza gzip finisce per essere circa 670kb).

Probabilmente non è il quello ottimo, ma almeno non è più pazzesco.

Ai posteri, ecco la mia 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

Si può anche dare un'occhiata a Webpack Bundle Analyzer.

Rappresenta il contenuto del pacco come conveniente treemap zoomabile interattivo.