Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack compiles too huge bundle.js (in examples) #809

Closed
ilearnio opened this issue Sep 26, 2015 · 3 comments
Closed

Webpack compiles too huge bundle.js (in examples) #809

ilearnio opened this issue Sep 26, 2015 · 3 comments

Comments

@ilearnio
Copy link

I'm new to webpack. Can't figure why is it compiles such a heavy bundle.js. Even for the smalest of your examples, todos-with-undo it's 1.9 MB! For other more complex examples it's about 2.5 MB. There's definitely something wrong in the configuration.
Great job by the way :)

@gaearon
Copy link
Contributor

gaearon commented Sep 26, 2015

There's nothing wrong per se, the examples are just not configured for production. We aren't likely to do this here to avoid the maintenance burden—please consult fuller Webpack boilerplates for examples of production configs.

At the very least you'll want to do this in production:

  • change devtool from 'eval' to 'source-map'
  • add webpack.DefinePlugin to set process.env.NODE_ENV to 'production'
  • add webpack.optimize.UglifyJsPlugin for minification
  • make sure you call Babel with NODE_ENV=production so .babelrc doesn't enable react-transform

A typical Webpack production config might look like this:

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

module.exports = {
  devtool: 'source-map',
  entry: [
    './src/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  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: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'src')
    }]
  }
};

Here is a boilerplate including a production mode if you're interested.

@chaoyangnz
Copy link

The best way should be AsyncRoute. We should bundle the template/css/js of a component together to avoid multiple requests, but load it on demand.

@BHouwens
Copy link

BHouwens commented Aug 7, 2016

Having devtool as inline-source-map instead of just source-map will also bulk the output file by putting the source map (surprise) inline. Obvious, but I overlooked this and it took me an hour to figure out so I'm putting it here for general future reference

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants