Migrating to webpack 5 to improve build time and reduce chunk sizes

Webpack an open source project is not just a tool to bundle the frontend assets but much more than that. After a long time of 2 years, webpack came with its new upgrade i.e. webpack 5.

Webpack 5 all about

Earlier at OYO, we were using webpack 4.4.x and we decided to move to webpack 5 after getting to know the advantages of this version. Drawing the advantages in short which took our attention for which one can refer to the webpack documentation too for deeper understanding:

1. Faster builds with persistent caching which is instead of building the whole app over and over again, only the changed parts will be built, while reusing the unchanged ones from the cache.
2. Better long term caching with the new algorithms that have been added in order to assist with long term caching and is enabled in production mode.
3. Improve bundle size with better Tree Shaking and Code Generation.
4. Module Federation support which allows multiple separate builds to form a single application also known as Micro-Frontends.
5. The watcher used by webpack was refactored. It was previously using chokidar and the native dependency fsevents (only on macOS). Now it’s only based on native Node.js fs. This means there is no native dependency left in webpack.
6. Webpack 5 has introduced Asset Modules in place of the url/file loaders. So, we can now remove these packages and can use these inhouse loaders.
7. Code cleanup, a newly named chunk id algorithm is now enabled by default in development mode that gives chunks human-readable references. So, there is no need to use the below code used for debugging which was used to name the chunk:

import(/* webpackChunkName: "name" */ "module")

It is possible to use chunkIds: “named” in production just make sure not to expose sensitive information regarding module names accidentally.

Issues that we were facing

Slow build time: Both the development and production build were taking a lot of time, for production build which was around 11 mins.

There might be no need for one to upgrade to the latest webpack version, but bringing some of the inhouse features in the new version which attracted us to migrate to this new version.

Hands on

To start with your migration if you are using webpack 4 then make sure to upgrade webpack 4 to its current latest version because those items will get deprecated when you move to webpack 5. If you are using webpack < 4, upgrading to the latest webpack 5 version will require additional guidance i.e you first need to migrate to webpack 4 then to webpack 5. Reference: webpack 4 migration guide.

Also, make sure you are running the latest versions of webpack-cli, plugins and loaders.

To work with webpack v5 you can install it using the following command:

yarn add webpack@latest

On upgrading the versions of webpack, webpack-cli, loaders and plugins, you can come across some errors or warnings which can be tracked by invoking the webpack to get the stack trace of the deprecation warnings to figure out which plugins and loaders are responsible using the below command:

node --trace-deprecation node_modules/webpack/bin/webpack.js --mode=development --config config/desktop.base.js

Here, config/desktop.base.js is just the config file of desktop which contains the webpack config. In normal projects, it will be webpack.config.js in the root directory.

There are certain things that are deprecated, make sure to upgrade them and get them to a working version. The breaking changes are:

1. Plugins or loaders that are raised as deprecated in webpack v4 have been removed which indirectly means that the plugins or loaders that were giving deprecation warnings in v4 will be removed once upgraded to v5 so that has to be taken care of before going ahead.
2. There are some changes in the way we are passing the arguments in the built-in plugins. Check here.
3. Some of the node.js polyfills are removed so you have to install the polyfills yourself.

Talking about numbers

1. The Overall reduction in chunk size is 126.4 Kb.
   Overall chunk size while using webpack v4: 1212.849 Kb
   Overall chunk size while using webpack v5: 1086.392 Kb (10.9%) 126.4 Kb of reduction.
2. Js size reduction in Critical rendering path:

JS chunk sizes in CRP

3. Production build time is reduced by 29.16%, we can see improvement in Build time as it is reduced from 11 mins to 8.2 mins (29.16%) on Jenkins.

4. Development build time for mobile client when using webpack 4 is 220.36s and using webpack 5 169.83s on the local machine which is another 22.93% improvement.

Things to keep in mind

1. The minimum supported Node.js version has increased from 6 to 8 for webpack 5 i.e. for using webpack 5 one have to upgrade the Node.js version.
2. Webpack v5 migration can not be done directly from v2 or v3. It can be done only from v4. So, if you are on a version lower than v4 then thats a complete different migration which needs to be followed one after the other sequentially for which you can refer the webpack documentation.
3. When migrating to v5 make sure that your webpack 4 build doesn’t print deprecation warnings else those will be lost on upgrading the webpack v5 which can cause problems in future.
4. Webpack migration from v4 to v5 is not just upgrading the webpack version, it’s about migrating all the plugins and loaders to their latest versions taking care of their working or compatible versions. So, that every loaders and plugins are compatible with each other.

Should you upgrade to webpack v5?

This can be a very subjective question which can have both positive and negative points, it depends on how you use webpack in your project. Most of the developers who use webpack, use a lot of plugins and loaders. The thing that needs to be taken care of is the compatibility of the plugins with each other and with webpack. Most of the developers don’t end up touching webpack very much.

In short, dealing with these breaking changes can be annoying but this is not too much to make some changes in the application’s configuration for a better and faster build systems.

References

https://github.com/webpack/webpack
https://webpack.js.org/migrate/5/