Ideas for a lighter bar

[ptbrowne]

The bar is fairly big on is included in all our applications. It needs to be shipped in several ways :

• On mobile it is included in the application
• On web it is shipped by the stack

The bar depends on several libraries :

• cozy-client
• cozy-ui
• React

Historically, the bar has bundled all its libraries since it is easiest way for it to be served by the stack. It also enables the bar to work everywhere, even in non React contexts.

Unfortunately, we can see (below in the screenshots) that those libraries make up for most of the size of the cozy-bar.

Possible actions

• a light build could be provided for applications that want to provide big libraries. cozy-ui and other big libs (React, ReactDOM) could be provided by the host application (using webpack externals).
  {{ STACK_ASSETS_LIGHT }} could be used in the template to indicate to the stack that we want smaller libs.

• The bar could be shipped on npm only transpiled to be bundled in the application later (it would also be good for the mobile usage)

• hammerjs could be replaced by something lighter since we use it only at one place, it seems likely that we are not using all its functionalities (= remove big libraries when they are used only once)

• The bar could be a React component, inheriting from the cozyClient in the context

Output of webpack-analyzer

Discussion with Cedric on Mattermost

patrick
a mon avis, cozy-bar devrait recevoir cozy-ui, preact etc..
(édité)
cedric:
11:01 AM
aaah oui ça va être chiant pour la personalisation ça tiens
que cozy-bar utilise son propre cozy-ui ><
hum peut être quelque chose à faire avec les chunks ici
patrick:
11:04 AM
je ne crois pas
si l application hote a deja cozy-ui et preact, il ne faut pas que la cozy-bar le shippe
c est surtout ca le probleme je pense
cedric:
11:05 AM
Si tu le shippe pas, il saura le retrouver tout seul avec l'app?
patrick:
11:06 AM
tu lui passe une reference de React/ReactDOM/CozyUI
cedric:
11:06 AM
Le truc c'est que la bar est aussi prévu pour savoir fonctionner seul, une app vailla ou vuejs doit être capable de l'utiliser
ou bien on fait des build différents
patrick:
11:06 AM
dans ce cas la tu prends un build qui contient tout
cedric:
11:06 AM
bundle et léger
A tester alors, là je t'avouerai que je ne pourrais pas regarder ça avant mes vacances
patrick:
11:07 AM
cozy-ui ne devrait pas etre completement integré je pense
j ai l impression que ds ce cas on devrait utiliser des chemins complets
cedric:
11:07 AM
Il n'est pas completement intégré, c'est juste les icones qui prennet pas mal de place en fait
patrick:
11:08 AM
il faut que j etudie pourquoi le tree shaking ne marhce pas
cedric:
11:08 AM
c'est pas ce qui est fait dans la bar?
le tree shaking ne fonctionne pas bien avec webpack 3, webpack 4 pourrait faire mieux
patrick:
11:08 AM
Image collée à 2018-8-7 11-08.png
ya la modal et tout
cedric:
11:08 AM
Parce que la bar utilise la modale aussi
le tracker aussi
je n'utilise jamais index de cozy-ui pour éviter de tout prendre justement, après j'ai peut être raté un truc
patrick:
11:12 AM
ok
j allais te demander comment on fait pour le bundlesize sur ma PR
(édité)
je vois que cozy-bar est deja en rouge en fait
tiens en decembre 2017 j'avais ouvert #146
cedric:
11:16 AM
bundlesize n'est vraiment pas bloquant c'est vraiement pour nous pour garder en tête
ah oui tiens, la bar n'avançant vraiment pas beaucoup en ce moment, je fais vraiment pas souvent le tour des issues, je l'ai vu mais ça restait pas urgent