hackjunction / hackjunction/JunctionApp

Remove duplicate dependencies, reduce bundle size

Ouverte
#33 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
code style help wanted nice to have
Langage dominant
JavaScript
Étoiles
78
Forks
69
Métriques de merge des PR
Aucune PR mergée en 30 j

Description

Current bundle sizes for the frontend are rather large:

```
668.88 KB (+1.35 KB) build/static/js/8.811c1165.chunk.js
419.88 KB (+7.16 KB) build/static/js/7.8d45f9cc.chunk.js
207.24 KB (+445 B) build/static/js/main.0a8d735f.chunk.js
195.92 KB (+46 B) build/static/js/0.c9df37b9.chunk.js
161.75 KB (-54.38 KB) build/static/js/9.13c960ed.chunk.js
12.94 KB (+204 B) build/static/js/10.aad8fea4.chunk.js
11.82 KB (+6.51 KB) build/static/js/13.70543070.chunk.js
8.61 KB (+6 B) build/static/js/2.d747df3d.chunk.js
5.48 KB (+1.03 KB) build/static/js/12.16818be3.chunk.js
5.36 KB (+20 B) build/static/js/11.14ad2c8f.chunk.js
4.87 KB (-224 B) build/static/js/4.24bf5b95.chunk.js
4.51 KB (-8 B) build/static/js/1.54a90ee7.chunk.js
4.43 KB (-7.4 KB) build/static/js/14.19a8c82c.chunk.js
3.97 KB (-942 B) build/static/js/3.bed8496e.chunk.js
1.28 KB (+2 B) build/static/js/runtime-main.f3fe7f1e.js
```

We have some old libraries which are still being used for a handful of components, the functionality of which can be replaced with some other larger libraries we're using. Examples of this:

- `antd` which is used only for the `` component
- `react-hyper-modal` which should with `` a component from `material-ui`
- `react-inlinesvg` which is used only in ``

Also, we should analyze the source map to see which other libraries are causing considerable bloat and see if we can replace those with some more lightweight options, or implement the functionality ourselves.

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Analysez la source map du frontend et le rapport de bundle actuel afin d’identifier les dépendances dupliquées ou disproportionnellement volumineuses. Examinez les utilisations de antd dans Upload, de react-hyper-modal par rapport à material-ui Dialog et de react-inlinesvg dans GlitchLoader. Le travail est considéré comme terminé lorsque les dépendances inutiles sont réduites ou que leurs utilisations sont remplacées, tout en préservant la fonctionnalité des composants concernés et en démontrant un bundle plus petit.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
javascript, react
Domaine
frontend, performance
Type d'issue
Refactorisation
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.