How to make Webpack Faster in a Monorepo?

Why use a Monorepo?

Monorepo is the best way to share code and modify existing code.
You can structure your code in packages, keeping well-defined boundaries of the public API of each domain.

You can easily modify backend, frontend, design system, shared code in a single pull request. It is also easy to review and to test locally all these changes. No need to release packages.

One downside of the monorepo is that you have all the code in the same place, and this can slow down a lot of things, like bundlers, test runners, git, IDE and more. Nevertheless, one of the most exciting jobs of a developer is to optimize something.

What is Webpack?

Webpack is the most famous bundler for frontend (we also bundle our backend with it). You can do almost anything with Webpack if you are creative enough.

As we keep adding more and more packages to our monorepo, Webpack build and rebuild started getting slower and heavier.
Let's see how we solved this at Woovi.

How to make Webpack Faster in a Monorepo?

Current, we have 7 frontends in our monorepo, and many more packages, like our design system, webpack tooling, form package, table, and others.
We noticed that each frontend was rebuilding even when we didn't change any related code of it. We reread the Webpack docs and improved our watchOption in our webpack config files.

This is our solution

{
   watchOptions: getWebpackWatchOptions(getIgnoredEntrypoints('main')),
}

const getIgnoredEntrypoints = (except = '') => {
  const apps = [
    '**/packages/babel',
    '**/packages/console',
    '**/packages/eslint',
    '**/packages/eslint-plugin',
    '**/packages/login',
    '**/packages/main',
    '**/packages/null',
    '**/packages/register',
  ]

  return apps.filter((app) => !app.includes(except));
}

const getWebpackWatchOptions = (ignored = []) => ({
  aggregateTimeout: 200,
  ignored: [
    '**/node_modules',
    '**/build',
    '**/.jest-cache',
    '**/dist',
    '**/.webpack',
    '**/.cache',
    '**/cache',
    '**/public',
    '**/docs-build',
    '**/.idea',
    '**/prettier',
    '**/dist-storybook',
    '**/.docusuarus',
    '**/.next',
    '**/coverage',
    '**/.eslintcache',
    '**/build-server',
    '**/.docusuarus',
    '**/yarn-error.log',
    '**/.docusuarus',
    '**/turbo-build.log',
    '**/.turbo',
    '**/__tests__',
    'CHANGELOG.md',
    '*.log',
    '*.swp',
    '*.tmp',
    ...ignored,
  ],
});

This config will make each frontend ignore changes in all the other 6 frontends, and also on some generated code, cache and node_modules.

Webpack building and rebuilding are faster again, and it also avoid unnecessary rebuilds.

In Conclusion

Monorepos brings a lot of benefits, but it also brings a lot of challenges, like performance optimization. Webpack is very versatile and can be a great tool to make your Startup scale.

Woovi
Woovi is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are hiring!

Photo by Marc-Olivier Jodoin on Unsplash