Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[meta] Perf build #926

Open
3 of 5 tasks
ptbrowne opened this issue Feb 22, 2019 · 3 comments
Open
3 of 5 tasks

[meta] Perf build #926

ptbrowne opened this issue Feb 22, 2019 · 3 comments

Comments

@ptbrowne
Copy link
Contributor

ptbrowne commented Feb 22, 2019

Baseline: 2421ko

image

  • Remove duplicate lib via webpack aliasing : 2317ko

image

  • Do not bundle all d3 inside build : 2179ko

image

First PR perf : #907

Possible candidates for size reduction:

@ptbrowne
Copy link
Contributor Author

ptbrowne commented Feb 22, 2019

From nono

#907 (comment)

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

@cozy cozy deleted a comment from ptbrowne Mar 19, 2019
@drazik drazik changed the title Perf build [meta] Perf build Aug 27, 2019
@JF-Cozy
Copy link
Contributor

JF-Cozy commented Aug 30, 2021

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 Direct dep to material-ui cozy-ui#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 :

image

@JF-Cozy
Copy link
Contributor

JF-Cozy commented Sep 8, 2021

Webpack Bundle Analyzer

(en rouge les libs cozy)
image

image

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 Bundle size optimizations cozy-keys-lib#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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants