Slow Small Webpack 2 Build - Tree Shaking - Sass - Chunking <p>I've put together a very basic webpack 2 build, but it seems to be slow for the project size. The three things I wanted have were:</p> <ol> <li>Chunking (js &amp; scss)</li> <li>SCSS compiling</li> <li>Tree Shaking</li> </ol> <p>Webpack seemed to be a good choice for being able to do these things. I've been using Gulp and Rollup, but the SCSS/Chunking along side of the tree shaking is a nice thing. </p> <p>It takes around 4000 - 5000ms to compile the build, which wouldn't be the end of the world except the project is so small, so I'm worried about that becoming much larger as a project grows.</p> <p>I've tried a couple things to improve the speed.</p> <pre><code>resolve : { root: path.resolve(__dirname,'src') } </code></pre> <p>This did help, reducing the time by a couple hundred ms, so that was great. I tried to take this further by also resolving alias, but that didn't really show any gains as far as I could tell.</p> <p>I set devTool to eval as well. Beyond this I haven't really been able to improve things, but I'm sure it's something in the way I've set things up. It's worth noting that while 'webpack' compiles the build, running the webpack-dev-server doesn't. It's starts up, hangs on the compile and then crashes. This may or may not be a separate issue, but I thought it was worth including. </p> <p>I'm also using ES6 System.import for chunking (just as a note).</p> <p>I put the project up on git, so feel free to pull it down: <a href="https://github.com/loriensleafs/trying-out-webpack2" rel="nofollow">https://github.com/loriensleafs/trying-out-webpack2</a></p> <p>The webpack.config.js is:</p> <pre><code>var path = require('path'), webpack = require('webpack'), CleanPlugin = require('clean-webpack-plugin'), ExtractTextPlugin = require('extract-text-webpack-plugin'), production = process.env.NODE_ENV === 'production'; var plugins = [ new ExtractTextPlugin({ filename: 'bundle.css', allChunks: true}), new webpack.optimize.CommonsChunkPlugin({ name : 'vendor', children : true, minChunks : 2 }) ]; if (production) { plugins = plugins.concat([ new CleanPlugin('builds'), new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 51200, // ~50kb }), new webpack.optimize.UglifyJsPlugin({ mangle: true, compress: { warnings: false, // Suppress uglification warnings }, }), new webpack.DefinePlugin({ __SERVER__ : !production, __DEVELOPMENT__ : !production, __DEVTOOLS__ : !production, 'process.env': { BABEL_ENV: JSON.stringify(process.env.NODE_ENV), } }) ]); } module.exports = { // debug : !production, devTool : production ? false : 'eval', entry : './src', output : { path : 'builds', filename : 'bundle.js', chunkFilename : 'chunk.js', publicPath : 'builds/' }, resolve : { root: path.resolve(__dirname,'src') }, plugins : plugins, module : { loaders: [ { test : /\.(png|gif|jpe?g|svg)$/i, loader : 'url', query : { limit: 10000 } }, { test : /\.js$/, include : /src/, exclude : /node_modules/, loader : 'babel' }, { test : /\.scss$/, include : /src/, exclude : /node_modules/, loader : ExtractTextPlugin.extract(['css','sass']) }, { test : /\.html$/, loader : 'html' } ] } }; </code></pre> <p>Thanks for any advice/help folks have on this. If there's any other helpful info I can post on here please let me know.</p>