Lodash in Next.js optimieren: Webpack und Babel

Lodash ist eine beliebte JavaScript-Bibliothek mit zahlreichen Hilfsfunktionen für häufige Programmieraufgaben. Dazu gehören die Verarbeitung von Arrays und Objekten, der Umgang mit Datums- und Zeitwerten sowie mathematische Operationen.

In einem Next.js-Projekt ist es wichtig, die Einbindung von Lodash zu optimieren. So lässt sich die Bundle-Größe reduzieren und die Performance verbessern.

Folgende Strategien können Sie ausprobieren:

• Bündeln Sie Ihren Code und die Abhängigkeiten mit einem Tool wie webpack oder rollup. Diese Tools können die Bundle-Größe reduzieren, indem sie nicht verwendeten Code entfernen und den enthaltenen Code optimieren.
• Optimieren Sie die Einbindung von Lodash in das Bundle mit einem Tool wie lodash-webpack-plugin oder lodash-rollup-plugin. Mit diesen Plugins können Sie gezielt nur die benötigten Funktionen statt der gesamten Lodash-Bibliothek einbinden und so die Bundle-Größe reduzieren.
• Erwägen Sie babel-plugin-lodash, um die Einbindung von Lodash weiter zu optimieren. Dieses Plugin kann bestimmte Lodash-Funktionen durch gleichwertige, kleinere native JavaScript-Funktionen ersetzen.
• Verwenden Sie in Ihrer .babelrc-Datei unbedingt das Preset next/babel. Es enthält mehrere Plugins, die zur Reduzierung der Bundle-Größe beitragen können, darunter das bereits erwähnte babel-plugin-lodash.

Lodash in Next.js mit lodash-webpack-plugin optimieren

Mit lodash-webpack-plugin können Sie optimieren, wie Lodash in ein mit webpack erstelltes Bundle eingebunden wird. Das Plugin erlaubt es, festzulegen, welche Funktionen der Lodash-Bibliothek in das Bundle aufgenommen werden sollen. Indem unnötige Funktionen entfallen, kann die Bundle-Größe sinken.

Um lodash-webpack-plugin in einem Next.js-Projekt zu verwenden, müssen Sie es zunächst installieren. Dies ist mit npm oder yarn möglich:

    # mit npm
    npm install --save-dev lodash-webpack-plugin

    # mit yarn
    yarn add --dev lodash-webpack-plugin

Erstellen Sie anschließend im Stammverzeichnis Ihres Projekts eine next.config.js-Datei, falls dort noch keine vorhanden ist. In dieser Datei können Sie lodash-webpack-plugin konfigurieren, indem Sie das Plugin mit require laden und zur Liste der webpack-Plugins hinzufügen.

Das folgende Beispiel zeigt eine mögliche Konfiguration für ein Next.js-Projekt:

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

module.exports = {
    webpack: (config) => {
        config.plugins.push(new LodashModuleReplacementPlugin());
        return config;
    },
};

Standardmäßig nimmt lodash-webpack-plugin sämtliche Funktionen der Lodash-Bibliothek in das Bundle auf. Wenn Sie nur einen Teil davon benötigen, können Sie dem Plugin ein Optionsobjekt übergeben und die Eigenschaften shorthands sowie cloning auf false setzen. Dadurch werden Kurzschreibweisen und Klonfunktionen aus dem Bundle ausgeschlossen:

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

module.exports = {
    webpack: (config) => {
        config.plugins.push(new LodashModuleReplacementPlugin({
            shorthands: false,
            cloning: false,
        }));
        return config;
    },
};

Mit der Eigenschaft modularize können Sie außerdem festlegen, welche Funktionen in das Bundle aufgenommen werden. Um beispielsweise nur map und filter einzubinden, können Sie folgende Konfiguration verwenden:

const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');

module.exports = {
    webpack: (config) => {
        config.plugins.push(new LodashModuleReplacementPlugin({
            modularize: true,
            'map': 'map',
            'filter': 'filter',
        }));
        return config;
    },
};

Lodash in Next.js mit babel-plugin-lodash optimieren

babel-plugin-lodash ist ein einfacher Transformationsschritt, der gezielt einzelne Lodash-Module auswählt, sodass Sie dies nicht manuell tun müssen.

In Kombination mit lodash-webpack-plugin lassen sich noch kleinere, gezielt zusammengestellte Builds erstellen.

Um babel-plugin-lodash in einem Next.js-Projekt zu verwenden, müssen Sie es zunächst installieren. Dies ist mit npm oder yarn möglich:

    # mit npm
    npm install --save-dev babel-plugin-lodash

    # mit yarn
    yarn add --dev babel-plugin-lodash

Konfigurieren Sie danach Babel für die Verwendung von babel-plugin-lodash. In einem Next.js-Projekt erstellen Sie dazu im Stammverzeichnis eine .babelrc-Datei und fügen das Plugin zur Liste der Plugins hinzu.

Das folgende Beispiel zeigt eine mögliche Konfiguration von babel-plugin-lodash in einem Next.js-Projekt:

{
    "presets": ["next/babel"],
    "plugins": ["lodash"]
}

Standardmäßig ersetzt babel-plugin-lodash sämtliche Lodash-Funktionen in Ihrem Code durch gleichwertige native JavaScript-Funktionen. Wenn Sie nur bestimmte Funktionen ersetzen möchten, können Sie dem Plugin ein Optionsobjekt übergeben, dessen Eigenschaft lodash ein Array der zu ersetzenden Funktionen enthält.

Um beispielsweise nur die Funktionen map und filter zu ersetzen, können Sie folgende Konfiguration verwenden:

{
    "presets": ["next/babel"],
    "plugins": [
        ["lodash", { "lodash": ["map", "filter"] }]
    ]
}

Lodash bietet Hilfsfunktionen für zahlreiche wiederkehrende Programmieraufgaben. Beim Einsatz in einem Next.js-Projekt sollten Sie darauf achten, wie die Bibliothek in das Bundle eingebunden wird. Dafür kommen unter anderem webpack, rollup, lodash-webpack-plugin, babel-plugin-lodash sowie npm oder yarn infrage.

Lodash-webpack-plugin kann die Einbindung von Lodash in das Bundle optimieren, während babel-plugin-lodash bestimmte Lodash-Funktionen durch gleichwertige, kleinere native JavaScript-Funktionen ersetzen kann. Mit diesen Strategien können Entwicklerinnen und Entwickler die Performance ihrer Next.js-Anwendungen verbessern und deren Bundle-Größe reduzieren.