[meta] Perf build

[ptbrowne]

Baseline: 2421ko

• Remove duplicate lib via webpack aliasing : 2317ko

• Do not bundle all d3 inside build : 2179ko

First PR perf : https://github.com/cozy/cozy-banks/pull/907

Possible candidates for size reduction:

• [x] Removing moment from chart.js

  • Another approach taken by chartJS is to add the feature to have adapters to be able to replace moment by another library. https://github.com/chartjs/Chart.js/issues/4303. This normally would allow us to use date-fns.
  • Remove completely moment via webpack https://github.com/chartjs/Chart.js/issues/4303#issuecomment-461161063

• [x] Only import what we need from cozy-ui, verify tree shaking for cozy-ui

• [x] Cozy Authentication build ? Why is it so big ? Transpile it.

• [ ] Localforage ?

• [ ] Cozy stack client db.json (issue here, https://github.com/cozy/cozy-client/issues/109)

[ptbrowne]

From nono

https://github.com/cozy/cozy-banks/pull/907#issuecomment-464091565

Some other ideas:

* remove the Fetch polyfill (it is no longer needed for the browsers we support)

* use lazy loading for the graphs libs

* redux-raven-middleware and raven.js seems to load the same files: are both necessary?

* try svgo on icon-collect-account.svg

Cozy Authentication build ? Why is it so big ?

It embeds 65ko of CSS from cozy-ui, and some stylus things

[JF-Cozy]

L'idée serait d'avoir une approche loi de Pareto et d'agir sur les plus grosses libs plutôt que de faire de multiple optimisations un peu partout. 20% d'action pour 80% d'efficacité.

Les libs les plus grosses (hors lib cozy - voir plus bas l'analyse du poids des libs) sont chart, d3, moment et mui.

• chart.js - pour créer des graphiques
  • utilisé sur la page de compte (page d'entrée sur l'app) et sur la page des transactions (sous forme de LineChart). Composant HistoryChart utilisé dans BalanceHeader > History et TransactionHeader
  • utilisé sur la page analyse (sous forme de Doughnut)
• d3 - pour traiter les données
  • utilisé pour le graphique historique uniquement avec d3.extent, d3.drag, d3.select, d3.easeExpInOut, d3.easeLinear, d3.ExpIn, d3.mouse, d3.bisector, d3.scaleLinear, d3.timeFormat, d3.scaleTime
• moment + moment-timezone - pour traiter les dates
  • utilisé dans le service stats uniquement, qui calcule les statistiques sur les comptes bancaires et enregistre les résultats dans le doctype io.cozy.bank.accounts.stats.
• mui - Material ui, affichage des composants

Préconisations :

• concernant chart et d3 :
  • supprimer le graphique historique sur la page des comptes et des transactions, mais garder le donut sur la page analyse
  • mettre à jour chart qui semble plus léger sur la version 3 - 180ko par rapport à la version 2 - 380ko, OU
  • remplacer chart par une lib plus légère (voir chartist - 38ko par exemple)
  • supprimer totalement les graphiques
• concernant moment :
  • le service se lance à la création / mise à jour d'un opération bancaire ("trigger": "@event io.cozy.bank.operations:CREATED,UPDATED"). Il pourrait être bundle à part et loadé soit dans un deuxième temps (après l'affichage de la première vue) soit au moment de son utilisation (est-ce que la stack ne le fait pas déjà ? Est-ce possible ?)
  • supprimer le service
• concernant mui-core :
  • on pourrait l'embarquer dans cozy-ui comme dépendance (voir https://github.com/cozy/cozy-ui/issues/1865)
  • nécessité d'importer les composants custom Tabs, Tab et SpeedDial dans cozy-ui (depuis Maif)
• concernant l'app en général :
  • lazy loader l'import des composants des routes secondaires (analyse et settings) pour que le bundle principal ne contienne que le minimum nécessaire à la première vue (compte), et/ou les composants secondaires de la première vue
• concernant mui-style :
  • on utilise aujourd'hui @material-ui/styles qui fait 50ko, on pourrait surcharger avec stylus à la place

Analyse du poids des libs avec BundlePhobia :

[JF-Cozy]

Webpack Bundle Analyzer

(en rouge les libs cozy)

Analyse :

Libs :

Hors lib cozy, les plus grosses sont (en poids minifié) :

• chart.js : 153ko
• tldjs : 147ko
• lodash : 126ko
• d3 : 90ko

Côté cozy :

• cozy-ui : 225ko
• cozy-pouch-link : 185ko
• cozy-client : 172ko
• cozy-bar : 190ko

Autre :

• L'app fait 4.6Mo et n'a pas de vendors
• icons-sprite est chargé alors que Banks ne passe plus par ce système
• node-forge et tldjs sont des dépendances de cozy-keys-lib sur laquelle on avait fait un travail d'optimisation https://github.com/cozy/cozy-keys-lib/pull/43 . A noter que node-forge est aussi une dépendance de cozy-scripts
• react-inspector ne sert à rien en prod (sert pour les devTools cozy-client)

Préconisations :

• séparer les vendors (qui contient tous les node_modules) de l'app.js
• faire un chunck pour la cozy-bar, qui ne devrait pas se retrouver dans l'app.js, d'autant plus que son code varie rarement
• voir si on peut supprimer le css shippé par la cozy-bar, par exemple via un plugin webpack qui supprimerait le css non utilisé
• supprimer ou séparer icons-sprite de cozy-ui
• mettre à jour ou remplacer chart.js afin de l'alléger
• alléger lodash, voir par exemple https://lodash.com/custom-builds
• vérifier que le travail d'optim sur cozy-keys-lib concernant node-forge et tldjs n'a pas sauté
• explorer une piste d'amélioration sur cozy-pouch-link, voir si on peut importer pouch différement afin de réduire son poids
• supprimer react-inspector du build de prod