Benchmarking Bundler 2020: Rollup vs. Paket vs. Webpack

Blog

Benchmarking Bundler 2020: Rollup vs. Paket vs. Webpack

Bundler dienen als Eckpfeiler für alle modernen Web-Apps. Wir haben Rollup, Parcel.js und Webpack anhand mehrerer Kriterien verglichen.

Bundler dienen als Eckpfeiler für alle modernen Web-Apps – genauer gesagt für alle JavaScript-Apps. Als sich die Frontend-Welt mit immer mehr clientseitig gerenderten Apps weiterentwickelte, kamen Ideen auf, wie wir unsere Tonnen von JS effizient bündeln können.

Kognitiv wird die Auswahl mit zunehmender Anzahl von Optionen schwierig. Hier analysieren wir die Tech- und Non-Tech-Kompetenzen der Top-Bündler, die heute verfügbar sind, um Ihre Entscheidung einfach und gut informiert zu machen.

Wir behandeln:

Für den Vergleich technischer Kompetenzen haben wir aufgegriffen Facebook-Pixel reagieren als Bibliothek und ein sehr einfaches Reagieren-App als Beispiel, um jeden dieser Bundler zu vergleichen.

Dieser Vergleich soll keinen einzigen Gewinner unter diesen großartigen Tools ermitteln; Vielmehr soll es Ihnen helfen, Ihre Entscheidung leichter zu treffen. Alle diese Bundler sind definitiv großartige Tools, die von großartigen Leuten verwaltet werden, und sie sind alle auf die eine oder andere Weise super toll. An alle Betreuer, Mitwirkende, Sponsoren und Unterstützer, Prost

Konfigurationen

Die Konfiguration eines Bundles ist einer der am meisten verfluchten und zugleich anspruchsvollsten Bereiche in der Frontend-Welt. Für kleine Anwendungen könnte dies sehr einfach sein. Mit zunehmender Größe der Anwendung benötigen wir jedoch ausgefeiltere Konfigurationen, um unsere Apps effizient und leistungsfähig zu halten.

Wir haben viele Debatten unter Entwicklern darüber erlebt, wie mühsam es ist, einen modernen Tech-Stack für eine kleine App zu konfigurieren. Diese Debatten und die gemeinsamen Muster, die später von der Mehrheit der Community übernommen wurden, haben viele Bundler dazu veranlasst, Zero-Config-Lösungen anzubieten.

Obwohl es von fast allen dieser Bundler behauptet wird, ist es für keinen von ihnen möglich, eine Nullkonfiguration zu haben. Es geht vielmehr darum, schnell konfigurierbar zu sein und die Konfigurationsanleitungen so komfortabel wie möglich zu halten.

Alle diese Bundler haben ihre Rot- und Blautöne in diesem Bereich. Hier teilen wir Konfigurationen zum Generieren von Verteilungspaketen für React Facebook Pixel. Es gibt Ihnen einen Einblick, wie es für jeden dieser Bundler aussieht.

Webpack

const path = require('path'); const TerserPlugin = require('terser-webpack-plugin'); module.exports = { entry: ['./src/index.js'], output: { path: path.join(__dirname, 'dist'), filename: 'fb-pixel-webpack.js', libraryTarget: 'umd', library: 'ReactPixel', }, module: { rules: [ { use: 'babel-loader', test: /.js$/, exclude: /node_modules/, }, ], }, resolve: { extensions: ['.js'], }, optimization: { minimize: true, minimizer: [ new TerserPlugin({ terserOptions: { warnings: false, compress: { comparisons: false, }, parse: {}, mangle: true, output: { comments: false, ascii_only: true, }, }, parallel: true, cache: true, sourceMap: true, }), ], nodeEnv: 'production', sideEffects: true, }, };

Aufrollen

import babel from '@rollup/plugin-babel'; import { nodeResolve } from '@rollup/plugin-node-resolve'; import { terser } from 'rollup-plugin-terser'; import filesize from 'rollup-plugin-filesize'; import progress from 'rollup-plugin-progress'; import visualizer from 'rollup-plugin-visualizer'; export default { input: 'src/index.js', output: [ { file: 'dist/fb-pixel.js', format: 'cjs', name: 'ReactPixel', exports: 'named', }, ], plugins: [ terser(), babel({ babelHelpers: 'bundled' }), nodeResolve(), // All of following are just for beautification, not required for bundling purpose progress(), visualizer(), filesize(), ], };

Paket.js

Wir brauchten keine Konfigurationen für Parcel, da die Standardkonfigurationen ausreichten, um unsere Bibliothek zu verwalten. Hier ist der Befehl, den wir verwendet haben:

So deinstallieren Sie Avg Antivirus vom Android-Handy
bash 'bundle:parcel': 'parcel build src/index.js --experimental-scope-hoisting --out-file fb-pixel-parcel.js',

Hier mein Fazit dazu:

  • webpack erfordert immer noch die Verwendung der ES5-Syntax, was es etwas problematisch macht
  • Rollup hat eine einfachere Syntax und sieht ideal für die Verwaltung von Bibliotheken aus
  • Parcel v2 bietet Unterstützung für Konfigurationsdateien mit fantastischen Standardkonfigurationen, die für anspruchsvolle Apps erweitert werden können

#webpack #paket #rollup #javascript #web-entwicklung

blog.logrocket.com

Benchmarking Bundler 2020: Rollup vs. Paket vs. Webpack

Bundler dienen als Eckpfeiler für alle modernen Web-Apps. Wir haben Rollup, Parcel.js und Webpack anhand mehrerer Kriterien verglichen.