Webpack tworzenie dużego pliku z małym projektem

Question

Mam mój pakiet sieci Web generujący duży plik main.js (1,7 MB) z małym projektem ~ 20-30 plików mniej niż 100 linii każdy. Zależności wymagane są nieliczne (React, Fluxible) i używam każdy plugin zoptymalizować mogę zrozumieć:

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

}; 

Co robię źle lub gdzie mogę dalszej poprawy rozmiar pliku?

Answer 1

Należy ustawić przynajmniej

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

które pomogą znacznie z React.

Ponadto ustawienie devtool na source-map jest preferowane w środowisku produkcyjnym. Aby uzyskać więcej informacji, patrz official documentation.

Możesz spróbować sprawdzić wyjście przy użyciu the analyse tool. Aby uzyskać JSON, spodziewasz się, że będziesz musiał zrobić coś takiego jak webpack --json > stats.json, a następnie przekazać to narzędzie do stats.json. To może dać ci trochę wglądu.

Answer 2

Moja reakcja spadła z 2,1mb do 160kb spakowanego gzipem przez robienie rzeczy tutaj (devtools: 'source-map'), używając uglifyjs z domyślnymi ustawieniami (bez gzipa kończy się to około 670kb).

To chyba nie jest , że świetnie, ale przynajmniej nie jest już szalony.

dla potomności, tu jest mój 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

Można również spojrzeć na Webpack Bundle Analyzer.

Przedstawia zawartość pakietu jako wygodną, ​​interaktywną, powiększalną mapę terenu.