Wie CommonJS seine Pakete vergrößert

Erfahren Sie, wie sich CommonJS-Module auf die Änderung Ihres Anwendungsbaums auswirken

8. Mai 2020
Aktualisiert 26. Mai 2020

Es erscheint in:
Schnelle Ladezeiten

En esta publicación, veremos qué es CommonJS y por qué hace que sus paquetes de JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar Plus sean más grandes de lo necesario.

Zusammenfassung: Um sicherzustellen, dass der Packager Ihre Anwendung erfolgreich optimieren kann, sollten Sie sich nicht auf CommonJS-Module verlassen und die ECMAScript-Modulsyntax in Ihrer gesamten Anwendung verwenden.

Was ist CommonJS?

CommonJS es un estándar de 2009 que estableció convenciones para módulos JavaScript. Inicialmente estaba destinado a ser utilizado fuera del BrowserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Plus web, principalmente para aplicaciones del lado del ServerLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en Plus.

Mit CommonJS können Sie Module definieren, deren Funktionalität exportieren und in andere Module importieren. Das folgende Snippet definiert beispielsweise ein Modul, das fünf Funktionen exportiert: hinzufügen, subtrahieren, multiplizieren, Teileny max:

const { maxBy } = benötigen('lodash-es');
const fns = {
hinzufügen: (zu, b) => zu + b,
subtrahieren: (zu, b) => zu - b,
multiplizieren: (zu, b) => zu * b,
Teilen: (zu, b) => zu / b,
max: arr => maxBy(arr)
};
Object.keys(fns).forEach(fnName => Modul.Exporte[fnName] = fns[fnName]);

Später kann ein anderes Modul einige oder alle dieser Funktionen importieren und verwenden:

const { hinzufügen } = benötigen('./utils');
console.Log(hinzufügen(1, 2));

Aufrufen IndexUn index o índice es generalmente un directorio en un orden específico que se usa con fines de orientación. En términos de motores de búsqueda, un índice es la lista de páginas web que es emitido por el motor de búsqueda en respuesta a una solicitud de búsqueda del usuario. Información general La lista que se muestra posteriormente de introducir una solicitud de búsqueda específica se llama SERPs (Search Engine Plus.js mit Gib nicht gibt die Nummer aus 3 auf der Konsole.

Aufgrund des Fehlens eines standardisierten Modulsystems im Browser in den frühen 2010er Jahren wurde CommonJS auch zu einem beliebten Modulformat für clientseitige JavaScript-Bibliotheken.

Wie wirkt sich CommonJS auf die endgültige Größe Ihres Pakets aus?

Die Größe Ihrer serverseitigen JavaScript-Anwendung ist nicht so kritisch wie im Browser. Aus diesem Grund wurde CommonJS nicht entwickelt, um die Größe des Produktionspakets zu reduzieren. Gleichzeitig, Analyse zeigt, dass die JavaScript-Paketgröße immer noch der Hauptgrund für die Verlangsamung von Browseranwendungen ist.

JavaScript-Zackenbarsche und Minifier, wie z Webpack y terser, realice diferentes optimizaciones para reducir el tamaño de su aplicación. Al analizar su aplicación en el momento de la compilación, intentan eliminar tanto como sea posible del QuellcodeEl código fuente es un programa de PC o página web que se convierte en un lenguaje que es leído por una máquina y se recoge en imagen y función. El código fuente es una parte importante del SEO porque determina la correcta ejecución de una página web. La optimización del código fuente es por ende parte del SEO técnico. Código fuente para páginas web Mientras que el código fuente Plus que no está utilizando.

Im obigen Snippet sollte Ihr endgültiges Paket beispielsweise nur das enthalten hinzufügen Funktion, da dies das einzige Symbol von ist utils.js Worin bist du wichtig? index.js.

Lassen Sie uns die Anwendung wie folgt erstellen Webpack Rahmen:

const path = benötigen('path');
Modul.Exporte = {
entry: 'index.js',
output: {
filename: 'out.js',
path: path.resolve(__dirname, 'dist'),
},
mode: 'production',
};

Hier geben wir an, dass wir Produktionsmodusoptimierungen verwenden und verwenden möchten index.js als Einstiegspunkt. Nach dem Aufrufen Webpack, wenn wir das erkunden Ausfahrt Größe, wir werden so etwas sehen:

$ CD dist &AmpereConcepto de AMP¿Qué es el AMP o Accelerated Mobile Pages?El AMP, abreviatura de Accelerated Mobile Pages, es una propuesta que empezó a tomar forma en el año 2016 con la finalidad de mejorar la usabilidad, lectura y, en general, la experiencia de los usuarios de teléfono celular dentro de cualquier página web. Emprendida por Google con un aperturismo total (es de código abierto), lleva en activo desde entonces para facilitar Plus;& ls -lah
625K Apr 13 13:04 out.js

Realisieren Paket ist 625KB. Wenn wir uns die Ausgabe ansehen, finden wir alle Funktionen von utils.js plus viele Module von lodash. Obwohl wir nicht verwenden lodash im index.js ist Teil der AusgabeDies erhöht unser Produktionsvermögen erheblich.

Ändern wir nun das Modulformat in ECMAScript-Module und versuche es erneut. Diesmal, utils.js es würde so aussehen:

Export const hinzufügen = (zu, b) => zu + b;
Export const subtrahieren = (zu, b) => zu - b;
Export const multiplizieren = (zu, b) => zu * b;
Export const Teilen = (zu, b) => zu / b;
importieren { maxBy } desde 'lodash-es';
Export const max = arr => maxBy(arr);

Y. index.js würde stören utils.js Verwenden der Syntax des ECMAScript-Moduls:

importieren { hinzufügen } desde './utils';
console.Log(hinzufügen(1, 2));

Mit dem gleichen Webpack Konfiguration können wir unsere Anwendung erstellen und die Ausgabedatei öffnen. Jetzt sind es 40 Bytes mit den folgenden Ausfahrt:

(()=>{"use strict";console.Log(1+2)})();

Beachten Sie, dass das endgültige Paket keine der Funktionen von enthält utils.js dass wir nicht verwenden, und es gibt keine Spur von lodash! Sogar mehr, terser (der JavaScript-Minifier, der Webpack verwendet) in der hinzufügen lauf weiter console.log.

Eine faire Frage, die Sie stellen könnten, ist: Warum macht die Verwendung von CommonJS das Ausgabepaket fast 16.000-mal größer?? Natürlich ist dies ein Spielzeugbeispiel, tatsächlich ist der Größenunterschied möglicherweise nicht so groß, aber CommonJS wird höchstwahrscheinlich Ihrem Produktionsaufbau ein erhebliches Gewicht hinzufügen.

CommonJS-Module sind im allgemeinen Fall schwieriger zu optimieren, da sie viel dynamischer als ES-Module sind. Um sicherzustellen, dass Ihr Stitcher und Minifier Ihre Anwendung erfolgreich optimieren kann, sollten Sie sich nicht auf CommonJS-Module verlassen und die Syntax des ECMAScript-Moduls in Ihrer gesamten Anwendung verwenden.

Beachten Sie, dass auch wenn Sie ECMAScript-Module in verwenden index.jsWenn das von Ihnen verwendete Modul ein CommonJS-Modul ist, wird die Paketgröße Ihrer Anwendung beeinflusst.

Warum erweitert CommonJS seine Anwendung?

Um diese Frage zu beantworten, werden wir uns das Verhalten von ansehen ModuleConcatenationPlugin im Webpack und diskutieren Sie danach die statische Analysierbarkeit. Dieses Plugin verkettet den Umfang aller Ihrer Module zu einem einzigen Abschluss und ermöglicht Ihrem Code eine schnellere Ausführungszeit im Browser. Sehen wir uns ein Beispiel an:

Export const hinzufügen = (zu, b) => zu + b;
Export const subtrahieren = (zu, b) => zu - b;

importieren { hinzufügen } desde './utils';
const subtrahieren = (zu, b) => zu - b;
console.Log(hinzufügen(1, 2));

Oben haben wir ein ECMAScript-Modul, in das wir importieren index.js. Wir definieren auch a subtrahieren Funktion. Wir können das Projekt damit erstellen Webpack Konfiguration wie oben, aber dieses Mal werden wir die Minimierung deaktivieren:

const path = benötigen('path');
Modul.Exporte = {
entry: 'index.js',
output: {
filename: 'out.js',
path: path.resolve(__dirname, 'dist'),
},
optimization: {
minimize: falsch
},
mode: 'production',
};

Sehen wir uns die Ausgabe an:

 (() => { 
"use strict";

const hinzufügen = (zu, b) => zu + b;
const subtrahieren = (zu, b) => zu - b;

const index_subtract = (zu, b) => zu - b;**
console.Log(hinzufügen(1, 2));**
 })();

In der obigen Ausgabe befinden sich alle Funktionen im selben Namespace. Um Kollisionen zu vermeiden, wurde das Webpack umbenannt subtrahieren lauf weiter index.js zu index_subtract.

Wenn ein Minifier den obigen Quellcode verarbeitet, führt er Folgendes aus:

• Löschen Sie nicht verwendete Funktionen subtrahieren y index_subtract
• Entfernen Sie alle Kommentare und redundanten Leerzeichen
• Kippen Sie den Körper des hinzufügen Funktion in der console.log Anruf

Dies wird häufig von Entwicklern erwähnt Entfernung nicht verwendeter Importe wie Baumschütteln. Das Schütteln von Bäumen war nur möglich, weil das Webpaket (zur Kompilierungszeit) statisch verstehen konnte, welche Symbole wir importieren utils.js und welche Symbole es exportiert.

Dieses Verhalten ist standardmäßig für aktiviert ES-Module Weil sie sind statisch analysierbarerim Vergleich zu CommonJS.

Schauen wir uns genau das gleiche Beispiel an, aber diesmal ändern Sie sich utils.js So verwenden Sie CommonJS anstelle von ES-Modulen:

const { maxBy } = benötigen('lodash-es');
const fns = {
hinzufügen: (zu, b) => zu + b,
subtrahieren: (zu, b) => zu - b,
multiplizieren: (zu, b) => zu * b,
Teilen: (zu, b) => zu / b,
max: arr => maxBy(arr)
};
Object.keys(fns).forEach(fnName => Modul.Exporte[fnName] = fns[fnName]);

Dieses kleine Update wird die Ausgabe erheblich verändern. Da das Einfügen auf dieser Seite zu lang ist, habe ich nur einen kleinen Teil geteilt:

...
(() => {
"use strict";
var _utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(288);
const subtrahieren = (zu, b) => zu - b;
console.Log((0,_utils__WEBPACK_IMPORTED_MODULE_0__ .IH)(1, 2));
})();

Beachten Sie, dass das endgültige Paket einige enthält Webpack "Runtime": injizierter Code, der für den Import / Export der Funktionalität der gepackten Module verantwortlich ist. Diesmal, anstatt alle Symbole von zu platzieren utils.js y index.js Unter demselben Namespace benötigen wir zur Laufzeit dynamisch die hinzufügen Funktion mit __webpack_require__.

Dies ist notwendig, da wir mit CommonJS den Exportnamen aus einem beliebigen Ausdruck abrufen können. Der folgende Code ist beispielsweise ein absolut gültiges Konstrukt:

Modul.Exporte[localStorage.getItem(Math.random())] = () => { … };

Der Packager kann zur Kompilierungszeit nicht wissen, wie der Name des exportierten Symbols lautet, da hierfür Informationen erforderlich sind, die nur zur Laufzeit im Kontext des Browsers des Benutzers verfügbar sind.

Auf diese Weise kann der Minifier nicht verstehen, was genau ist index.js verwendet seine Abhängigkeiten, damit Sie es nicht loswerden können. Wir werden das exakt gleiche Verhalten auch für Module von Drittanbietern beobachten. Wenn wir ein CommonJS-Modul aus importieren KnotenmoduleIhre Build-Toolchain kann sie nicht richtig optimieren.

Bäume mit CommonJS schütteln

CommonJS-Module sind viel schwieriger zu analysieren, da sie per Definition dynamisch sind. Beispielsweise ist der Importspeicherort in ES-Modulen im Vergleich zu CommonJS, wo es sich um einen Ausdruck handelt, immer ein Zeichenfolgenliteral.

In einigen Fällen können nicht verwendete Exporte beim Erstellen mithilfe eines Drittanbieters entfernt werden, wenn die von Ihnen verwendete Bibliothek bestimmten Konventionen zur Verwendung von CommonJS entspricht Webpack Stecker. Dieses Plugin bietet zwar Unterstützung für das Schütteln von Bäumen, deckt jedoch nicht alle Möglichkeiten ab, wie Ihre Abhängigkeiten CommonJS verwenden. Dies bedeutet, dass Sie nicht die gleichen Garantien wie bei ES-Modulen erhalten. Fügen Sie im Rahmen Ihres Erstellungsprozesses zusätzlich zu den Standardeinstellungen zusätzliche Kosten hinzu Webpack Verhalten.

Fazit

Um sicherzustellen, dass der Packager Ihre Anwendung erfolgreich optimieren kann, sollten Sie sich nicht auf CommonJS-Module verlassen und die ECMAScript-Modulsyntax in Ihrer gesamten Anwendung verwenden.

Hier sind einige praktische Tipps, um sicherzustellen, dass Sie auf dem optimalen Weg sind:

• Verwenden Sie Rollup.js NodeJS Auflösung
  PluginConcepto de Plugin¿Qué es un Plugin?Un Plugin es un fragmento o componente de código hecho para ampliar las funciones de un programa o de una herramienta. En el ámbito del marketing digital, especialmente dentro del marketing de contenidos, es algo que se utiliza con mucha frecuencia dentro de entornos como WordPress, puesto que sirven al momento de contar con añadidos que hagan mucho más cómoda y completa la experiencia de Plus und stellen Sie die ModuleNur Häkchen, um anzugeben, dass Sie nur von ECMAScript-Modulen abhängig sein möchten.
• Verwenden Sie das Paket is-esm

  um zu überprüfen, ob ein npm-Paket ECMAScript-Module verwendet.

• Wenn Sie Angular verwenden, erhalten Sie standardmäßig eine Warnung, wenn dies von Modulen abhängt, die nicht vom Baum geschüttelt werden können.