CODEWITHSUNDEEP
javascriptreactjswebpack
anandharshan
anandharshan

Reputation: 6362

How to improve Webpack performance in Dev Environment?

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.

Upvotes: 3

Views: 2916

Answers (2)

Cristian Sepulveda
Cristian Sepulveda

Reputation: 1730

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.

Upvotes: 1

charlespwd
charlespwd

Reputation: 538

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 compiled 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"
    ),
];

Upvotes: 7

Related Questions