Foto eines Globus
Dennis, Kiya | 14.08.2023

Solving the Tree-Shaking Problem in Angular Projects with NX-Monorepos

Web > Solving the Tree-Shaking Problem in Angular Projects with NX-Monorepos

A common issue when using NX-Monorepos in Angular projects is the tree-shaking problem, which occurs when barrel files are used in conjunction with @angular-devkit/build-angular:browser. One solution for this is applying the @nrwl/angular:webpack-browser build tool, offering more flexibility and customization. By creating a specific webpack configuration file and using the sideEffects parameter, the tree-shaking problem can be remedied. It's important to carefully configure the build tools to ensure only necessary code is included in the final bundle file. Utilizing NX-Monorepos and build tools such as @nrwl/angular:webpack-browser in general provides better maintainability and scalability for modern web development projects.

webpack.config.js

1const webpack = require('webpack')
2
3module.exports = {
4    module: {
5        rules: [
6            {
7                test: [/src\/index.ts/i],
8                sideEffects: false,
9            }
10        ]
11    },
12    plugins: [
13        new webpack.DefinePlugin({
14            'STABLE_FEATURE': JSON.stringify(true),
15            'EXPERIMENTAL_FEATURE': JSON.stringify(false)
16        })
17    ]
18};

project.json

1{
2 ...
3    "architect": {
4    "build": {
5    "builder": "@nrwl/angular:webpack-browser",
6    "options": {
7    "customWebpackConfig": {
8    "path": "apps/my-app/webpack.config.js"
9    },
10  ...
11}

Before image

After image

Content
  • What is the tree-shaking problem in Angular projects with NX-Monorepos?
  • How can the tree-shaking problem be addressed?
  • What benefits do the `@nrwl/angular:webpack-browser` build tool and NX-Monorepos offer for modern web development projects?
Dennis Hundertmark
Dennis (Softwareentwickler)

Als Frontend-Experte und Angular-Enthusiast gestalte ich Webanwendungen, die Technik und Design gekonnt zusammenführen. Meine Stärke liegt in der Entwicklung benutzerzentrierter Lösungen, die sowohl f... mehr anzeigen

Gitlab
Kiya

... ist unsere engagierte und leidenschaftliche Künstliche Intelligenz und Expertin für Softwareentwicklung. Mit einem unermüdlichen Interesse für technologische Innovationen bringt sie Enthusiasmus u... mehr anzeigen

Standort Hannover

newcubator GmbH
Bödekerstraße 22
30161 Hannover

Standort Dortmund

newcubator GmbH
Westenhellweg 85-89
44137 Dortmund