How do i improve the webpack build time. Presently i am packing around 150 files. and taking around 15 secs(Which is too much time). And majority of time is being eaten up during "optimize chunk assets" which takes around 10 secs. Any way to bring this down to 3-4 secs max.

Or how do i disable the optimize step in webpack. I am not explicitly using any configuration for minifying/uglifying.

This is the Configuration i am using presently::

module.exports = {
context: __dirname,
entry: './js/main.js',
target: 'web',
module: {
    loaders: [
        { test: /text!/, loader: 'raw-loader'},
        { test: /backbone/, loader: 'imports-loader?this=>window' },
        { test: /marionette/, loader: 'imports-loader?this=>window' },
        { test: /sprintf/, loader: 'script-loader' },
        { test: /\.css$/, loader: "style!css" },
        { test: /\.scss$/, loader: 'style!css!sass' },
        { test: /\.js$/, loader: 'jsx-loader?harmony' }
    ]
},
resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
    alias: {
        'text': 'raw'
    }
},
output: {
    filename: 'bundle.js',
    library: 'require',
    libraryTarget: 'this'
},
resolve: {
    alias: alias,
    root: path.join(__dirname, 'node_modules'),
    extensions: ['', '.js', '.jsx']
},
externals: {
    jquery: 'jQuery'
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'root.jQuery': 'jquery',
        'Backbone': 'backbone',
        '_': 'underscore',
        'Marionette': 'marionette',
        'sprintf': 'sprintf'
    })
],
devtool: 'source-map'
};

Thanks for the help in Advance.

How do i improve the webpack build time. Presently i am packing around 150 files. and taking around 15 secs(Which is too much time). And majority of time is being eaten up during "optimize chunk assets" which takes around 10 secs. Any way to bring this down to 3-4 secs max.

Or how do i disable the optimize step in webpack. I am not explicitly using any configuration for minifying/uglifying.

This is the Configuration i am using presently::

module.exports = {
context: __dirname,
entry: './js/main.js',
target: 'web',
module: {
    loaders: [
        { test: /text!/, loader: 'raw-loader'},
        { test: /backbone/, loader: 'imports-loader?this=>window' },
        { test: /marionette/, loader: 'imports-loader?this=>window' },
        { test: /sprintf/, loader: 'script-loader' },
        { test: /\.css$/, loader: "style!css" },
        { test: /\.scss$/, loader: 'style!css!sass' },
        { test: /\.js$/, loader: 'jsx-loader?harmony' }
    ]
},
resolveLoader: {
    root: path.join(__dirname, 'node_modules'),
    alias: {
        'text': 'raw'
    }
},
output: {
    filename: 'bundle.js',
    library: 'require',
    libraryTarget: 'this'
},
resolve: {
    alias: alias,
    root: path.join(__dirname, 'node_modules'),
    extensions: ['', '.js', '.jsx']
},
externals: {
    jquery: 'jQuery'
},
plugins: [
    new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        'root.jQuery': 'jquery',
        'Backbone': 'backbone',
        '_': 'underscore',
        'Marionette': 'marionette',
        'sprintf': 'sprintf'
    })
],
devtool: 'source-map'
};

Thanks for the help in Advance.

• javascript
• reactjs
• webpack

• This is one of the stackoverflow answers which does not solve my problem:: stackoverflow./questions/27412475/… But its still a good read. – anandharshan Commented Dec 9, 2015 at 14:04

2 Answers 2

There are a couple of optimizations you can do with your build.

First, as it is, you are parsing all the files in your node_modules through the jsx loader. You want to exclude them.

loaders: [{ 
    test: /\.js$/, 
    loader: 'jsx-loader?harmony', 
    exclude: /node_modules/, // <---
 }]

Second, all your vendor files (which don't change during development) are piled on every file change. That's not very efficient, you should separate the vendor files from the application code by using the CommonsChunkPlugin.

In essence, you have to add:

config.entry = {
  app: './js/main.js',
  vendor: ['react', 'moment', 'react-router', /* etc. all the "big" libs */],
};

config.output = {
  filename: '[name].js', /* will create app.js & vendor.js */
};

config.plugins = [
    /* ... */
    new webpack.optimize.CommonsChunkPlugin(
       /* chunkName= */"vendor", 
       /* filename= */"vendor.bundle.js"
    ),
];

Webpack offers many devtools: https://webpack.github.io/docs/configuration.html#devtool you are using devtools: 'source-map'.

I changed to devtools: 'cheap-eval-source-map' and the chunk asset optimization goes from 4500ms to 306ms, and with devtools: 'eval' goes to 1ms.

Take note that both are not Production Suported, because the final .js file is too big, in my case is 13MB.