In the previous article I made a superficial introduction to webpack, what is its purpose and how to set it up with the minimum configuration.

Here I want to share some of the problems that I had and how I solved them.

Webpack is really fast and the guys that develop it always try to hit the benchmarks in terms of speed of the builds but sometimes it can’t keep it, especially when your project has tons of modules that it has to process, decide the dependency order, fetch, etc. At some point you could start see some slowness in your build, especially in development mode. When you work on your dev server, you want you build to be fast, hot reload your code as fast as possible. When I worked on a code base of around 2.000 files, every save change was taking around 10 seconds to hot reload, which was affecting the efficiency of the developers in a bad way.

DllPlugin

Don’t get fooled by its name, it doesn’t have anything in common with Windows! This plugin creates a library (JSON file) that will be used by webpack to create a set of references to your modules.

This plugin is meant to be used to build once in a while the vendors of the application. Why? The vendors are less likely to change during the developments of the application, webpack doesn’t need to build them every time that we change one single line in our code base. I repeat, webpack is really fast and creates lot of optimizations, you want to use this plugin we you start seeing the new rebuild of your application around two seconds.

I use this plugin in development mode; you can’t use in production mode.

Here’s the code to set up your DllPlugin with your vendors. First of all I create two different config files for webpack. One for the vendors and one for your development environment.

1
2
3
4
5
6
7
8
9
// vendors.js
module.exports = [
'babel-polyfill'
'react',
'lodash/isEmpty',
'redux'
'redux-saga',
'redux-saga/effects',
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// webpack.config.vendors.js
const webpack = require('webpack')
const path = require('path')

module.exports = {
entry: path.resolve(__direname, 'vendors.js'),
output: {
// the name of the output file
filename: 'vendors.bundle.js',
// we will store it inside the 'src' folder
path: path.join(__dirname, 'src'),
// the library name is important. Webapck will use this
// name to create all the references to this file and the
// manifest generated
library: '[name]_lib'
},
plugins: [
new webpack.DllPlugin({
// The path to the manifest file which maps between
// modules included in a bundle and the internal IDs
// within that bundle
path: './[name]-manifest.json',
// The name of the global variable which the library's
// require function has been assigned to. This must match the
// output.library option above
name: '[name]_lib'
}),
]
}

DllReferencePlugin

In order to read this vendor, we have to use another plugin called DllReferencePlugin. Below a simple snippet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// webpack.config.dev.js
const path = require('path')
const webpack = require('webpack')

module.exports = {
entry: path.resolve(__dirname, 'src/app/index.js'),
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'src'),
},
plugins: [
new webpack.DllReferencePlugin({
context: '.',
manifest: require('./vendors-manifest.json')
}),
]
}

Remember to import your vendors bundle before the bundle of your application.

1
2
3
4
5
6
7
8
9
10
11
12
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src='vendors.bundle.js'></script>
<script src='bundle.js'></script>
</body>
</html>

It is worth to have a look inside the manifest that the plugin generates. As you can see there are different references that webpack will use to speed your build. That means, de facto, that your vendors will be built only once! So, if you upgrade your vendors or you install new vendors, remember to update your manifest again or you won’t see the changes applied to your vendors.

PrefetchPlugin

When I was working on a large scale project, the DllPlugin didn’t help that much, unfortunately. The application scale was really big, the quantity of HOF (High-order Functions) was that high that it was asking to webpack lot of computatino, especially retrieving the path of each file every time it was running the Hot Reloading. That’s where I decided to introduce the PrefetchPlugin. The link point to the old version of webpack because the new website doesn’t provide a documentation of this plugin yet.

The plugin basically puts into memory the resolution of a specific file so, when when webpack has to resolve it again, it already knows where to go. The usage of this plugin sped up the build drastically.

The thing is that I had to provide tons of files and in order to do that, I came up with a code like this

Once you have the lists of files inside your array, just follow the snippet:

1
2
3
4
5
6
7
8
9
10
11
12
 const webpack = require('webpack')
const plugins = []
files.forEach(file => {
plugins.push(new webpack.PrefetchPlugin(file));
})

module.exports = {
// ...
plugins: [
...plugins
]
}

I hope this tips would help you to help your developement environment