Tree-Shaking Problem in Angular-Projekten mit NX-Monorepos

Ein bekanntes Problem bei der Verwendung von NX-Monorepos in Angular-Projekten ist das Tree-Shaking-Problem, das bei der Verwendung von Barrel-Dateien in Kombination mit @angular-devkit/build-angular:browser auftritt. Eine Lösung dafür ist die Verwendung des @nrwl/angular:webpack-browser Build-Tools, das mehr Flexibilität und Anpassbarkeit bietet. Durch das Anlegen einer speziellen Webpack-Konfigurationsdatei und die Verwendung des sideEffects-Parameters kann das Tree-Shaking-Problem behoben werden. Es ist wichtig, die Build-Tools sorgfältig zu konfigurieren, um sicherzustellen, dass nur notwendiger Code in der finalen Bundle-Datei enthalten ist. Die Verwendung von NX-Monorepos und Build-Tools wie @nrwl/angular:webpack-browser bietet insgesamt eine bessere Wartbarkeit und Skalierbarkeit für moderne Webentwicklungsprojekte.

webpack.config.js

const webpack = require('webpack')

module.exports = {
    module: {
        rules: [
            {
                test: [/src\/index.ts/i],
                sideEffects: false,
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            'STABLE_FEATURE': JSON.stringify(true),
            'EXPERIMENTAL_FEATURE': JSON.stringify(false)
        })
    ]
};

project.json

{
 ...
    "architect": {
    "build": {
    "builder": "@nrwl/angular:webpack-browser",
    "options": {
    "customWebpackConfig": {
    "path": "apps/my-app/webpack.config.js"
    },
  ...
}

Vorher

Nachher