Quelle est une bonne stratégie pour diviser mon code frontend en lots plus petits? : webdev


J’ai une application Web qui utilise Webpack pour regrouper les actifs. Jusqu’à présent, j’ai construit 1 gros pack CSS et 1 gros pack JS pour tout mon code.

L’application est devenue suffisamment grande pour que je devrais probablement réduire la taille de ces paquets.

Au plus haut niveau, je peux diviser le code en –

  • “commun” – éléments qui sont à peu près nécessaires sur chaque page (par exemple, style de navigation et menu global)

  • “admin” – éléments nécessaires pour diverses pages d’administration comme la gestion des utilisateurs, l’historique d’audit, etc.

  • “application” – mal nommé mais c’est juste “tout le reste” nécessaire pour les pages destinées aux utilisateurs non-administrateurs

Est-ce suffisant? Dois-je plutôt le décomposer par composant?

Je suppose que ma question générale est de savoir dans quelle mesure je devrais être détaillé.

Si je crée des ensembles vraiment granulaires et petits pour chaque composant fonctionnel (par exemple, une table de filtrage et de recherche d’utilisateurs), mes packs restent très petits et optimisent la taille de chargement pour une page donnée. Mais je dois spécifier manuellement sur chaque page / itinéraire quels packs il doit charger, ce qui est un peu encombrant.

Où est l’équilibre? J’adorerais si quelqu’un a de bonnes règles empiriques ou sa propre stratégie pour diviser les actifs en petits paquets Web.

Merci!

Close Menu