LBRYCommunity/lbry-desktop

Fork 0

Code-split #6228

Merged

infinite-persistence merged 8 commits from ip/code-split into master

2021-06-25 10:26:57 +02:00

infinite-persistence commented

2021-06-14 14:52:43 +02:00

(Migrated from github.com)

Issue

Closes #6150 Finish code-splitting

There's still some testing and bug fixes left, but I'd like a review now to see if this path will have major flaws.

Test instance

https://kp.odysee.com

Changes

Split code (imports) into 2 main chunks + individual files.
- ui.js reduced by 50%, allowing for faster download and earlier processing of the home page while the less-important components are being fetched.
- Splitting code achieved 2 things: (a) if the component is not mounted, then there's zero processing time used, (b) if the component will be mounted anyway, it will be delayed a bit to give priority to items in ui.js to load first.
Lazy-load homepage categories.
~~Don't block the homepage with a spinner while waiting for user/me. Instead, put placeholders on the small number of sub-components that rely on that data.~~ Had to revert.

Known issues

~~- 3rd-party CSS customizations broken~~

Markdown editor

Wunderbar-dropdown theme dark theme broken. CSS-import order problem to override Reach's, I think.

~~Videojs~~

What's next:

App:
- Split CSS (next largest chunk)
- Really lazy-load huge components, not just delaying it's import.
Improve claim_search?

## Issue Closes [#6150 Finish code-splitting](https://github.com/lbryio/lbry-desktop/issues/6150) There's still some testing and bug fixes left, but I'd like a review now to see if this path will have major flaws. ## Test instance https://kp.odysee.com ## Changes - Split code (imports) into 2 main chunks + individual files. - `ui.js` reduced by 50%, allowing for faster download and earlier processing of the home page while the less-important components are being fetched. - Splitting code achieved 2 things: (a) if the component is not mounted, then there's zero processing time used, (b) if the component will be mounted anyway, it will be delayed a bit to give priority to items in `ui.js` to load first. - Lazy-load homepage categories. - <strike>Don't block the homepage with a spinner while waiting for `user/me`. Instead, put placeholders on the small number of sub-components that rely on that data.</strike> Had to revert. ## Known issues <strike>- 3rd-party CSS customizations broken - [x] Markdown editor - [x] Wunderbar-dropdown theme dark theme broken. CSS-import order problem to override Reach's, I think. - [x] Videojs</strike> ## What's next: - App: - Split CSS (next largest chunk) - Really lazy-load huge components, not just delaying it's import. - Improve `claim_search`?

DispatchCommit (Migrated from github.com) reviewed 2021-06-14 14:52:43 +02:00

infinite-persistence commented

2021-06-15 10:48:02 +02:00

(Migrated from github.com)

Update (974e075 to 567e96c)

Appended hash to the chunk files.
Rebased to master to grab fixes for WaitUntilOnPage
Re-do "category lazy-loading" -- added placeholders so the layout don't change much (better visually when scrolling).

CSS issues remain...

**Update** (974e075 to 567e96c) - Appended hash to the chunk files. - Rebased to master to grab fixes for `WaitUntilOnPage` - Re-do "category lazy-loading" -- added placeholders so the layout don't change much (better visually when scrolling). CSS issues remain...

infinite-persistence commented

2021-06-16 11:00:13 +02:00

(Migrated from github.com)

Update (974e075 to 567e96c):

Reverted the 'user/me' bypass. If a resolve was called without this, we currently don't re-resolve those claims after 'user/me' is retrieved, so the GUI is messed up.
Rebased to master.

**Update** (974e075 to 567e96c): - Reverted the 'user/me' bypass. If a `resolve` was called without this, we currently don't re-resolve those claims after 'user/me' is retrieved, so the GUI is messed up. - Rebased to master.

infinite-persistence commented

2021-06-17 15:27:20 +02:00

(Migrated from github.com)

Currently looking at https://github.com/webpack-contrib/mini-css-extract-plugin, which will break apart the css to 1-per-bundle (I think). Seems like things will get messier.

I'm considering dropping this until a better approach is found.

@DispatchCommit, do you have any good ideas on how to solve the CSS problem? Not lazy-loading those components with 3rd-party libraries (videojs, simplemde, etc.) would be a quick fix, but it defeats the purpose of the PR as those are the exact items that takes the longest to init during boot up. Currently looking at https://github.com/webpack-contrib/mini-css-extract-plugin, which will break apart the css to 1-per-bundle (I think). Seems like things will get messier. I'm considering dropping this until a better approach is found.

neb-b commented

2021-06-17 21:57:34 +02:00

(Migrated from github.com)

@infinite-persistence Does it work if you move the mde/video.js css imports to the top level app component? Not the best solution because those are still really big but that might fix it

infinite-persistence commented

2021-06-18 11:27:05 +02:00

(Migrated from github.com)

Does it work if you move the mde/video.js css imports to the top level app component? Not the best solution because those are still really big but that might fix it

That worked for ReachUI and Videojs. Thanks a lot for the tip!
Still had to revert lazy-loading MDE, though. It's mixing mde and codemirror -- just couldn't get the order right.

Update (b4fcbe9 to 593cf1b):

Add quick-fix for CSS until we revisit splitting CSS properly.
Reverted lazy-loading SimpleMDE. Gained back half a meg.

> _Does it work if you move the mde/video.js css imports to the top level app component? Not the best solution because those are still really big but that might fix it_ That worked for ReachUI and Videojs. Thanks a lot for the tip! Still had to revert lazy-loading MDE, though. It's mixing mde and codemirror -- just couldn't get the order right. ---- Update (b4fcbe9 to 593cf1b): - Add quick-fix for CSS until we revisit splitting CSS properly. - Reverted lazy-loading SimpleMDE. Gained back half a meg.

infinite-persistence commented

2021-06-21 07:37:43 +02:00

(Migrated from github.com)

Current score

Desktop improved from ~27 to ~50:
Mobile didn't budge. It's usually because mobile includes throttling to simulate slower network/CPU, + CSS changes for mobile on our end. Something to keep in mind.
- .

## Current score - Desktop improved from ~27 to ~50: - <img src="https://user-images.githubusercontent.com/64950861/122710505-f442aa80-d292-11eb-85c9-b764c11e216a.png" width="300"> - Mobile didn't budge. It's usually because mobile includes throttling to simulate slower network/CPU, + CSS changes for mobile on our end. Something to keep in mind. - <img src="https://user-images.githubusercontent.com/64950861/122710324-9ca43f00-d292-11eb-9e5e-2fb632e2761b.png" width="300">.