hackjunction / hackjunction/JunctionApp

Remove duplicate dependencies, reduce bundle size

オープン
#33 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
code style help wanted nice to have
主要言語
JavaScript
スター
78
フォーク
69
PR マージ指標
30日以内にマージされた PR はありません

説明

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.

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

フロントエンドの source map と現在の bundle レポートを分析し、重複している依存関係や不釣り合いに大きな依存関係を特定します。Upload での antd、material-ui Dialog に関連する react-hyper-modal、GlitchLoader での react-inlinesvg の使用を確認します。不要な依存関係を削減するか、その使用を置き換え、影響を受けるコンポーネントの機能を維持したうえで、より小さい bundle を示せれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react
領域
frontend, performance
issue の種類
リファクタリング
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。