Étape 08

Prérequis

git checkout --force step-08
pnpm i

Description

L'équipe Booklist a bien bossé et a crée un super composant de liste (scroll infini, virtualisation, 120+ fps, animation d'entrée/sortie, la totale !).
Mais maintenant la compilation avec babel montre ses limites et prend beaucoup de temps.

Exercice

Utiliser un autre compilateur (esbuild, swc) sur le module Booklist.

Pour esbuild

1. Ajoutez les dépendances nécessaires.

apps/booklist/package.json

   "devDependencies": {
     "@types/react": "18.0.21",
     "@types/react-dom": "^18.0.6",
+    "esbuild-loader": "^2.20.0",
     "eslint": "8.25.0",
     "tsconfig": "workspace:*",
     "typescript": "^4.8.4",

2. Remplacer le loader babel par le loader esbuild.

apps/booklist/webpack.config.js

   devServer: {
     port: 3001,
   },
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'esbuild-loader',
+          options: {
+            loader: 'tsx',
+            target: 'esnext',
+          },
+        },
+      },
+    ],
+  },
   plugins: [

Pour swc

1. Ajoutez les dépendances nécessaires.

apps/booklist/package.json

   "devDependencies": {
+    "@swc/core": "^1.3.4",
     "@types/react": "18.0.21",
     "@types/react-dom": "^18.0.6",
     "eslint": "8.25.0",
+    "swc-loader": "^0.2.3",
     "tsconfig": "workspace:*",

2. Remplacer le loader babel par le loader swc.

apps/booklist/webpack.config.js

   devServer: {
     port: 3001,
   },
+  module: {
+    rules: [
+      {
+        test: /\.[jt]sx?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'swc-loader',
+        },
+      },
+    ],
+  },
   plugins: [

Vérifier que le nouveau compilateur fonctionne

pnpm i
pnpm serve

Bonus

Utiliser un autre compilateur sur le module Book.

Solution

Pour accéder à la solution :

git checkout --force step-08-result

Pour voir les changements :

git diff step-08..step-08-result

ou sur Github.