Optimizing Webpack for faster development

InVision is not only an amazing tool for prototyping, but also a team of excellent developers, who like to share their knowledge and experience in InVision Engineering blog. I want to share with you the article “Optimizing Webpack for faster React builds” by Jonathan Rowny, which I found extremely helpful. Thanks for awesome tips!


The case — Webpack script goes through all your dependencies while building app, which can take too much time. You can speed up building process by using Webpack’s DllPlugin. It builds all of your dependencies into a single file, which you can then inject separately from other JS scripts.


The article is ready to use, so just go ahead. The only thing, some libraries I was adding to the vendor file (React UI components etc), were using ES6 features, so had to be transpiled to ES5 (where the Babel comes). So, my webpack.dll.js looks like this:

module.exports = {
entry: {
vendor: ["babel-polyfill", path.join(__dirname, "client", "vendors.js")]
},
output: {
path: path.join(__dirname, "dist", "dll"),
filename: "dll.[name].js",
library: "[name]"

},
module: {
loaders: [
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['react', 'es2015', 'stage-2'],
cacheDirectory: true
}
}
]
},
plugins: ........

In the result, speed of building up application increased really nice. So less annoying waiting and looking at running lines in terminal ;)


Thank you for staying with me until these words ❤ I like to chat, so looking forward to hearing from you. Happy React coding!