Improve Webpack build time performance

[eugenio_romano]

Nowadays Webpack is the most used tool to build Angular based projects such as ADF. Sometimes, the build can become a bit slow, especially with big projects. I'd like to share some tricks with you on how to make it faster.

To make it easier to digest, I have split them into three points:

1. Happypack
2. NPM@5
3. Devtool

1. Happypack

HappyPack makes Webpack builds faster by allowing you to transform multiple files in parallel. Every time Webpack resolves a module, HappyPack will take it and all its dependencies and distribute those files to multiple worker "threads".

Install

npm install --save-dev happypack

Configure

Usually one of the slowest loaders is the ts-loader especially for big projects. I therefore suggest you apply Happypack to the ts-loader.

Open your Webpack configuration file and substitute the ts-loader with the Happypack loader as in the configuration below:

    module: {
        rules: [
            {
                test: /\.ts$/,
                include: [helpers.root('app')]
                loader: [
                    'happypack/loader?id=ts'
                ],
                exclude: [/node_modules/, /public/, /resources/, /dist/]
            }
        ]
    },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

    plugins: [
        new HappyPack({
            id: 'ts',
            threads: 4,
            loaders: [
                {
                    path: 'ts-loader',
                    query: {happyPackMode: true}
                }
            ]
        })]‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Enabling Happypack with the ts-loader has a side effect in that it silently ignores some errors. In order to restore the error check, you also need to add fork-ts-checker to your Webpack configuration files.

Let's take a look at how to do it:

Install

npm install --save-dev fork-ts-checker-webpack-plugin

Configure

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');


plugins: [
....
....
....
    new ForkTsCheckerWebpackPlugin()
]‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Note: If your app has been generated with Yeoman Generator Angular 2 Alfresco app >= 1.6.0 , this configuration has already been applied.

For more information about Happypack and fork-ts-checker refer to the official documentation.

2. NPM 5 

If you are using an older version of NPM, I suggest you install the new NPM 5 version. This version comes with a lot of cool stuff inside, but the most important feature is the rewrite of the cache that makes NPM really fast. 

If you want to know which version of NPM you are currently using, run the command:

npm -v

If you want to update NPM, run the command:

npm install npm@latest -g

3. Devtool

Another task where the Webpack performances are less than ideal in the generation of sourcemaps. In your Webpack config file, you can change the value of the option devtool in order to affect the performance of sourcemap generation. These values can affect build and rebuild speed dramatically. If you want more details about this topic, look at the official documentation.
Note: Some of the values are suited to development and some to production. 

For development you typically want fast sourcemap generation at the cost of bundle size:

devtool: 'eval'‍‍‍‍‍‍‍

I hope these little tricks can save a bit of your time during the build and install of your project. If you have more questions, please reply here or contact us using gitter.