Tech : passage à Parcel v2

[ronnix]

https://github.com/parcel-bundler/parcel/releases/tag/v2.5.0

https://www.npmjs.com/package/parcel/v/2.5.0

Infos

• https://parceljs.org/blog/v2/
• https://parceljs.org/getting-started/migration/

Notes de migration

• Par défaut, Parcel v2 utilise swc au lieu de Babel pour la transpilation

  Avantage : c’est plus rapide. Par contre, l’utilisation des tagged template litterals conduit à la génération de code qui déclenche une erreur dans terser (le minifieur) : Build fails if more than one file includes a tagged template literal parcel-bundler/parcel#7101

  On contourne le problème en écrivant différemment notre code pour échapper le nom du profil dans le HTML généré dynamiquement.

• Depuis la 2.4.0, Parcel utilise @parcel/css au lieu de PostCSS (cf. https://parceljs.org/blog/v2-4-0/)

• On met à jour les anciens plugins (changement d’API) :

  • on remplace le plugin parcel-plugin-static-files-copy par parcel-reporter-static-files-copy

  • on remplace parcel-plugin-ogimage par parcel-optimizer-ogimage

  • on remplace parcel-plugin-html-externals par parcel-resolver-ignore

  • on active le plugin standard @parcel/resolver-glob pour utiliser des imports * comme dans Parcel V1.

  • on remplace le plugin parcel-plugin-sw-asset-urls par le plugin standard @parcel/service-worker (ce qui évite de devoir maintenir à la main la liste de fichiers à mettre en cache)

• On s’assure que les noms des bundles soient mcc.XXX.(css|js)

  Les règles de nommage par défaut de Parcel utilisent l’arbre d’import pour déterminer quel est le nom du fichier racine : https://github.com/parcel-bundler/parcel/blob/v2/packages/namers/default/src/DefaultNamer.js

  Cela donne des noms un peu arbitraires pour les bundles CSS et JS.

  On utilise le plugin parcel-namer-rewrite pour forcer un nom plus explicite : https://www.npmjs.com/package/parcel-namer-rewrite

• On normalise les liens dans les fichiers sources :

  • lien absolu "/" pour aller vers la page d’accueil
  • lien relatif "toto.html" pour aller vers une autre page

  Note: des liens absolus seront bien générés par Parcel au final.

• On ajoute un lien vers le fichier browserconfig.xml

• On note que deux versions du JS sont générées :

  • une pour les navigateurs modernes capables de charger un script de type "module"
  • une option de repli pour les navigateurs plus anciens

  cf. https://parceljs.org/features/targets/#differential-bundling

[davidbgk]

Peut-être des choses à piocher ici https://www.tomspencer.dev/blog/2020/05/22/its-2020-lets-build-a-node.js-app-with-typescript/

[ronnix]

Il reste des problèmes que je ne sais pas trop résoudre quand le scope hoisting est activé...

[ronnix]

@davidbgk Suite à notre discussion j’ai refait une petite passe sur le service worker (c’était bien ça les 404) et la manière de contrôler le nommage des bundles.

[davidbgk]

Je viens de regarder et niveau perfs on est très sensiblement sur les mêmes valeurs 💪

[davidbgk]

Dans le log du build, j'ai deux choses qui m'interpellent :

Error: Bundles must have unique names

Et aussi le parcel-name-rewrite qui a l'air de renommer pas mal de choses (de manière redondante ?) :

parcel-namer-rewrite: Rewrite deplacements.HASHREFaaf496650d08cc0d.css -> mcc.css
parcel-namer-rewrite: Rewrite cas-contact-a-risque.HASHREF481344a99bc42863.css -> mcc.css
parcel-namer-rewrite: Rewrite deplacements.HASHREF4f48570d7b55e7a0.css -> mcc.css
parcel-namer-rewrite: Rewrite conseils-pour-les-jeunes.HASHREF8d43dc3673be63c0.js -> mcc.js

Est-ce que tu as le même comportement @ronnix ?

[ronnix]

Oui, je n'ai pas trop creusé ces logs. Mon impression intuitive était qu'un même fichier était peut être importé à plusieurs endroits, mais qu'à la fin ça se résolvait en un seul fichier.

[ronnix]

J’ai squashé les commits car sinon c’est chiant à rebaser, mais j’ai compilé toutes les notes dans le message.

[davidbgk]

👏 🙇