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

(PC-16618) fix(Web): optimisation lottie-web player #3351

Merged
merged 1 commit into from
Aug 3, 2022

Conversation

kopax-polyconseil
Copy link
Contributor

@kopax-polyconseil kopax-polyconseil commented Aug 3, 2022

Link to JIRA ticket: https://passculture.atlassian.net/browse/PC-16618

Stratégie

J'ai modifié dans node_modules/react-native-web-lottie/dist/index.js l'import de lottie-web par lottie-web/build/player/lottie_light.min.js, cette version supporte que les anims SVG, que nous utilisons exclusivement via des fichiers json fournis par nos UX.

Ceci est appliqué sous forme d'un patch-package de react-native-web-lottie en attendant que soit résolu l'issue react-native-web-community/react-native-web-lottie#68

La version “light” pesant 40.67KB Gzipped contre 65.99KB Gzipped actuel (gain de 37%)

Avant

image

  991.82 KB (+25.25 KB)  build/static/js/2.0053369a.chunk.js
  557.62 KB              build/static/js/main.67194ea2.chunk.js
  6.29 KB                build/static/js/4.0e871b91.chunk.js
  3.16 KB                build/static/js/5.4a687a4a.chunk.js
  1.73 KB                build/static/js/6.78966fc8.chunk.js
  1.42 KB                build/static/js/3.df3eab39.chunk.js
  1.22 KB                build/static/js/runtime-main.9886aef8.js

Après

image

  966.57 KB (-25.25 KB)  build/static/js/2.f376f75e.chunk.js
  557.62 KB              build/static/js/main.67194ea2.chunk.js
  6.29 KB                build/static/js/4.0e871b91.chunk.js
  3.16 KB                build/static/js/5.4a687a4a.chunk.js
  1.73 KB                build/static/js/6.78966fc8.chunk.js
  1.42 KB                build/static/js/3.df3eab39.chunk.js
  1.22 KB                build/static/js/runtime-main.9886aef8.js

⚠️ ce n'est toujours pas une configuration pour faire du tree shaking sur ce module mais c'est déjà un pas en avant

Checklist

I have:

  • Made sure the title of my PR follows the convention ($jira) $type($scope): $summary.
  • Made sure my feature is working on the relevant real / virtual devices (native and web).
  • Written unit tests native (and web when implementation is different) for my feature.
  • Added a screenshot for UI tickets.
  • Added new reusable components to AppComponents page and communicate to the team on slack.
  • If my PR is a bugfix, I add the link of the "résolution de problème sur le bug" on Notion

Screenshots

iOS Android Mobile - Chrome Desktop - Chrome Desktop - Safari

@kopax-polyconseil kopax-polyconseil self-assigned this Aug 3, 2022
@kopax-polyconseil kopax-polyconseil merged commit d281c64 into master Aug 3, 2022
@kopax-polyconseil kopax-polyconseil deleted the PC-16618 branch August 3, 2022 09:53
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

Successfully merging this pull request may close these issues.

2 participants