app speedup

[noxonsu]

в данный момент по https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fswaponline.github.io%2F%23%2FBTC%2F13bFRqtBivrvdBi37kxPtiSUH5qWwaoH15

Total Blocking Time 20 sec (у uniswap 8..)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (7.85 MiB)
      vendor.4347ce.js
      app.4347ce.css
      app.4347ce.js

в общем долгая загрузка это плохой UX. Пользователи привыкли к быстрой загрузке, поэтому отдельная комплексная задача ускорить приложение.

Цель

отдача контента за 1 секунду

Комплекс мер

• [ ] пререндеринг
• [ ] использование промежуточного бэкенда для прогрузки истории и балансов https://github.com/trustwallet/blockatlas
• [ ] улучшить lazyloading, отдельно балансы, отдельно история
• [ ] страницы кошелька, истории, эксченджа должны загружатся одинаково быстро со всем контентом
• [ ] уменьшить бандл если возможно (например я вижу lodash.js разных версий) - ContextReplacementPlugin/IgnorePlugin

Не делать это в React

Эти действия будут усложнять разработку и поддержку кода.

• передавать [], {}, () =>, this.func.bind(this) в свойства компонента. Эти структуры будут создаваться при каждом рендере, что избыточно.
• использовать такой синтаксис для изменения state. В этом случае нет гарантии в какой момент будет обновлено значение. Соответственно в другом месте можно получить не то что нужно.

setState({
  someValue: updatedValue,
})

• называть файлы компонентов и компоненты по разному. Использовать другие имена при импорте компонента. Это относится к хорошей практике (особенно важно при поиске по названиям в большой кодовой базе).
• использовать сложные структуры в стейте. Скорее всего это приведет к не нужным рендерам.

Полезно

Why Did You Render

[Disti4ct]

connected with #3511