Lazy load text-viewer and text-files #4698

artonge · 2023-08-18T15:16:34Z

Currently, 5Mb are loaded on the main thread. The idea is to lazy load most of it, and let webpack do a proper chunking.

Also in this PR:

Remove vendor bundling
Remove chunkIds declaration as it is already the default

Note	Before	After
Here, to exacerbate the network gains, it was throttled. The total size is reduced by ~0.15Mb, due to the better chunking. And the DOM loading time is reduced by 30%, because we do not wait for all the scripts before starting the rendering.
Without throttling, we can still observe a slight gain due to not executing 5Mb of scripts before rendering. The number is more volatile, but repetitions consistently show lower numbers for the lazy loaded build.
More request, but the initial ones are smaller, and the remaining are lazy loaded
Just to show the new build layout

Current webpack config dates from: #1659

src/viewer.js

juliusknorr · 2023-08-21T06:06:21Z

Thanks for looking into this. The change looks good to me, I just left one comment to ask @skjnldsv for confirmation.

skjnldsv

So, the idea is nice, but we're reaching another issue. This is too much split and will cause another issue: too many requests.
The request load overhead does have a huge impact. It's good to be on-demand, but I think we should group the chunks together to load 2-3 big async files instead of the new 50+ files that are in this PR 🙈

artonge · 2023-08-24T08:54:59Z

instead of the new 50+ files that are in this PR

Indeed, most of it was due to mermaid. I added a rule to merge those together. For the rest, not sure, it is what the default webpack config does at the moment, if this is not what we want, then we should fix that upstream instead of here, no ?

artonge · 2023-08-24T08:57:43Z

Some are really small, maybe splitChunks.minSize could help here.

skjnldsv · 2023-08-24T09:07:52Z

Some are really small, maybe splitChunks.minSize could help here.

We're getting close! 🚀

src/viewer.js

juliusknorr · 2023-11-27T08:14:36Z

Might already work if we allow async components in https://github.com/nextcloud/viewer/blob/master/src/views/Viewer.vue#L814-L815

pulsejet · 2023-11-27T19:44:47Z

nextcloud/viewer#2077

This one is critical. Once this is done, the intial load script size goes down by 5x

Before lazy loading viewer component:

After:

webpack.config.js

juliusknorr · 2023-11-28T08:33:59Z

There is probably more that could be done with the file list plugin but this seems like a good first improvement, thanks for the help @pulsejet ❤️

juliusknorr · 2023-11-28T08:53:37Z

Seems good from my perspective, the splitChunks.minSize does not seem to have an effect as there are still quite small chunks:

-rw-r--r--  1 julius  staff    33K Nov 28 09:48 js/data_image_svg_xml_base64_PCEtLSBUaGlzIGljb24gaXMgcGFydCBvZiBNYXRlcmlhbCBVSSBJY29ucy4gQ29weXJ-faaaea.js
-rw-r--r--  1 julius  staff   8.1K Nov 28 09:48 js/editor-collab.js
-rw-r--r--  1 julius  staff   5.3K Nov 28 09:48 js/editor-guest.js
-rw-r--r--  1 julius  staff   244K Nov 28 09:48 js/editor.js
-rw-r--r--  1 julius  staff   5.2K Nov 28 09:48 js/files-modal.js
-rw-r--r--  1 julius  staff   763K Nov 28 09:48 js/mermaid.js
-rw-r--r--  1 julius  staff   8.7K Nov 28 09:48 js/node_modules_d3-sankey_src_sankey_js-node_modules_d3-sankey_src_sankeyLinkHorizontal_js.js
-rw-r--r--  1 julius  staff   2.1K Nov 28 09:48 js/node_modules_dagre-d3-es_src_dagre-js_label_add-html-label_js-node_modules_dagre-d3-es_src_gr-77e053.js
-rw-r--r--  1 julius  staff   894B Nov 28 09:48 js/node_modules_dagre-d3-es_src_graphlib_json_js-_c4980.js
-rw-r--r--  1 julius  staff   894B Nov 28 09:48 js/node_modules_dagre-d3-es_src_graphlib_json_js-_c4981.js
-rw-r--r--  1 julius  staff    13K Nov 28 09:48 js/node_modules_dagre-d3-es_src_graphlib_json_js-node_modules_dagre-d3-es_src_index_js-node_modu-e535e5.js
-rw-r--r--  1 julius  staff   5.4K Nov 28 09:48 js/node_modules_dayjs_plugin_advancedFormat_js-node_modules_dayjs_plugin_customParseFormat_js-no-96543d.js
-rw-r--r--  1 julius  staff   690B Nov 28 09:48 js/node_modules_nextcloud_dialogs_dist_chunks_index-27e9ea0a_mjs.js
-rw-r--r--  1 julius  staff   2.9K Nov 28 09:48 js/node_modules_uuid_dist_esm-browser_v5_js.js
-rw-r--r--  1 julius  staff   131K Nov 28 09:48 js/src_extensions_index_js-src_components_Editor_EditorOutline_vue-data_image_svg_xml_base64_PCE-a8d943.js
-rw-r--r--  1 julius  staff    35K Nov 28 09:48 js/src_helpers_files_js-src_components_ViewerComponent_vue.js
-rw-r--r--  1 julius  staff   4.8K Nov 28 09:48 js/src_helpers_files_js.js
-rw-r--r--  1 julius  staff    16K Nov 28 09:48 js/src_store_index_js.js
-rw-r--r--  1 julius  staff   2.2K Nov 28 09:48 js/src_views_FilesSettings_vue.js
-rw-r--r--  1 julius  staff    65K Nov 28 09:48 js/src_views_RichWorkspace_vue-node_modules_nextcloud_vue_dist_Functions_emoji_mjs-node_modules_-0e99a0.js
-rw-r--r--  1 julius  staff   170K Nov 28 09:48 js/text-editors.js
-rw-r--r--  1 julius  staff   261K Nov 28 09:48 js/text-files.js
-rw-r--r--  1 julius  staff   587K Nov 28 09:48 js/text-init.js
-rw-r--r--  1 julius  staff   4.6M Nov 28 09:48 js/text-public.js
-rw-r--r--  1 julius  staff   114K Nov 28 09:48 js/text-text.js
-rw-r--r--  1 julius  staff    75K Nov 28 09:48 js/text-viewer.js
-rw-r--r--  1 julius  staff   912K Nov 28 09:48 js/vendors-node_modules_braintree_sanitize-url_dist_index_js-node_modules_quartzy_markdown-it-me-212f05.js
-rw-r--r--  1 julius  staff   427K Nov 28 09:48 js/vendors-node_modules_cytoscape-cose-bilkent_cytoscape-cose-bilkent_js-node_modules_cytoscape_-d92e99.js
-rw-r--r--  1 julius  staff    51K Nov 28 09:48 js/vendors-node_modules_dagre-d3-es_src_dagre_index_js.js
-rw-r--r--  1 julius  staff   1.3M Nov 28 09:48 js/vendors-node_modules_elkjs_lib_elk_bundled_js.js
-rw-r--r--  1 julius  staff    53K Nov 28 09:48 js/vendors-node_modules_mdast-util-from-markdown_lib_index_js.js
-rw-r--r--  1 julius  staff   141K Nov 28 09:48 js/vendors-node_modules_mdi_svg_svg_folder-move_svg_raw-node_modules_mdi_svg_svg_folder-multiple-c6f33e.js
-rw-r--r--  1 julius  staff    55K Nov 28 09:48 js/vendors-node_modules_nextcloud_axios_dist_index_es_mjs.js
-rw-r--r--  1 julius  staff    52K Nov 28 09:48 js/vendors-node_modules_nextcloud_browser-storage_dist_index_js-node_modules_debounce_index_js-n-906a21.js
-rw-r--r--  1 julius  staff   211K Nov 28 09:48 js/vendors-node_modules_nextcloud_browser-storage_dist_index_js-node_modules_debounce_index_js-n-984d74.js
-rw-r--r--  1 julius  staff   555K Nov 28 09:48 js/vendors-node_modules_nextcloud_moment_dist_index_js-node_modules_moment_locale_af_js-node_mod-a9a4c5.js
-rw-r--r--  1 julius  staff   196K Nov 28 09:48 js/vendors-node_modules_nextcloud_paths_dist_index_js-node_modules_nextcloud_auth_dist_index_es_-a26a98.js
-rw-r--r--  1 julius  staff   2.8M Nov 28 09:48 js/vendors-node_modules_nextcloud_vue_dist_index_mjs.js
-rw-r--r--  1 julius  staff    75K Nov 28 09:48 js/vendors-node_modules_vue_dist_vue_runtime_esm_js.js

juliusknorr · 2023-11-28T16:22:08Z

Cypress failures need some work as now it seems our default timeout for the editor is enough to lazy load all required js

pulsejet · 2023-11-28T19:51:45Z

I've no idea how cypress works so can't help with that. But I've a request -- can we backport this to 28? This issue is absolutely killing the massive loading time improvements we got with 27 => 28

juliusknorr · 2023-11-29T10:45:57Z

Sure, I'll have a look into the cypress stuff and would also backport to 28 still.

For now increase cypress timeouts for loading the editor
Follow up: check if we can somehow preload the js files (maybe using https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules)

juliusknorr · 2023-11-29T16:08:33Z

Actually timeouts are not the issue but outdated viewer js

nextcloud/viewer#2083
nextcloud/viewer#2084

+ Remove vendor bundling + Remove chunkIds declaration as it is already the default + Group mermaid chunks Signed-off-by: Louis Chemineau <louis@chmn.me>

Signed-off-by: Julius Härtl <jus@bitgrid.net>

Resolved

juliusknorr · 2023-11-29T20:23:35Z

/backport to stable28

Fixes #5332. Looks like #4698 brought back the file list header initialization that had just been moved to an init script in #4776. Signed-off-by: Max <max@nextcloud.com>

artonge self-assigned this Aug 18, 2023

artonge added the 3. to review label Aug 18, 2023

artonge added this to the Nextcloud 28 milestone Aug 18, 2023

artonge added performance 🚀 javascript labels Aug 18, 2023

artonge requested a review from juliusknorr August 18, 2023 15:17

juliusknorr reviewed Aug 21, 2023

View reviewed changes

src/viewer.js Outdated Show resolved Hide resolved

skjnldsv previously requested changes Aug 22, 2023

View reviewed changes

artonge force-pushed the artonge/perf/lazy_load_viewer branch from 875d1a2 to 07c2e0a Compare August 24, 2023 08:52

juliusknorr force-pushed the artonge/perf/lazy_load_viewer branch from 07c2e0a to bb7b5ea Compare August 30, 2023 10:35

This comment was marked as outdated.

Sign in to view

skjnldsv mentioned this pull request Nov 1, 2023

chore: 28.0.0 beta 1 nextcloud/server#41228

Merged

blizzz modified the milestones: Nextcloud 28, Nextcloud 29 Nov 23, 2023

juliusknorr force-pushed the artonge/perf/lazy_load_viewer branch from bb7b5ea to cdc219f Compare November 25, 2023 08:54

juliusknorr reviewed Nov 25, 2023

View reviewed changes

src/viewer.js Outdated Show resolved Hide resolved

pulsejet mentioned this pull request Nov 27, 2023

Massive bundle size #5045

Closed

pulsejet mentioned this pull request Nov 27, 2023

feat(viewer): allow async handler components nextcloud/viewer#2077

Merged

pulsejet reviewed Nov 27, 2023

View reviewed changes

webpack.config.js Outdated Show resolved Hide resolved

juliusknorr force-pushed the artonge/perf/lazy_load_viewer branch from c0a6ee8 to 0a3da62 Compare November 29, 2023 12:54

juliusknorr force-pushed the artonge/perf/lazy_load_viewer branch from d530993 to 57f5e88 Compare November 29, 2023 16:49

artonge and others added 3 commits November 29, 2023 20:27

Lazy load text-viewer and text-files

8da8c40

+ Remove vendor bundling + Remove chunkIds declaration as it is already the default + Group mermaid chunks Signed-off-by: Louis Chemineau <louis@chmn.me>

fix: Lazy load viewer component

8409b5a

Signed-off-by: Julius Härtl <jus@bitgrid.net>

fix: Merge webpack splitChunks options

b9009dc

Signed-off-by: Julius Härtl <jus@bitgrid.net>

juliusknorr force-pushed the artonge/perf/lazy_load_viewer branch from 57f5e88 to b9009dc Compare November 29, 2023 19:27

juliusknorr approved these changes Nov 29, 2023

View reviewed changes

juliusknorr merged commit 99ff08f into main Nov 29, 2023
36 checks passed

juliusknorr deleted the artonge/perf/lazy_load_viewer branch November 29, 2023 20:23

backportbot-nextcloud bot added the backport-request label Nov 29, 2023

backportbot-nextcloud bot mentioned this pull request Nov 29, 2023

[stable28] Lazy load text-viewer and text-files #5056

Merged

backportbot-nextcloud bot removed the backport-request label Nov 29, 2023

max-nextcloud added a commit that referenced this pull request Feb 2, 2024

fix: only register workspace once

6c1c67a

Fixes #5332. Looks like #4698 brought back the file list header initialization that had just been moved to an init script in #4776. Signed-off-by: Max <max@nextcloud.com>

max-nextcloud added a commit that referenced this pull request Feb 2, 2024

fix: only register workspace once

51064d9

Fixes #5332. Looks like #4698 brought back the file list header initialization that had just been moved to an init script in #4776. Signed-off-by: Max <max@nextcloud.com>

max-nextcloud mentioned this pull request Feb 2, 2024

fix: only register workspace once #5335

Merged

3 tasks

backportbot bot pushed a commit that referenced this pull request Feb 6, 2024

fix: only register workspace once

b358266

Fixes #5332. Looks like #4698 brought back the file list header initialization that had just been moved to an init script in #4776. Signed-off-by: Max <max@nextcloud.com>

blizzz mentioned this pull request Mar 5, 2024

29.0.0 beta 1 nextcloud/server#43991

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Lazy load text-viewer and text-files #4698

Lazy load text-viewer and text-files #4698

artonge commented Aug 18, 2023 •

edited by juliusknorr

Loading

juliusknorr commented Aug 21, 2023

skjnldsv left a comment •

edited

Loading

artonge commented Aug 24, 2023

artonge commented Aug 24, 2023 •

edited

Loading

skjnldsv commented Aug 24, 2023

This comment was marked as outdated.

juliusknorr commented Nov 27, 2023

pulsejet commented Nov 27, 2023 •

edited

Loading

juliusknorr commented Nov 28, 2023

juliusknorr commented Nov 28, 2023

juliusknorr commented Nov 28, 2023

pulsejet commented Nov 28, 2023 •

edited

Loading

juliusknorr commented Nov 29, 2023

juliusknorr commented Nov 29, 2023

juliusknorr commented Nov 29, 2023

Lazy load text-viewer and text-files #4698

Lazy load text-viewer and text-files #4698

Conversation

artonge commented Aug 18, 2023 • edited by juliusknorr Loading

juliusknorr commented Aug 21, 2023

skjnldsv left a comment • edited Loading

Choose a reason for hiding this comment

artonge commented Aug 24, 2023

artonge commented Aug 24, 2023 • edited Loading

skjnldsv commented Aug 24, 2023

This comment was marked as outdated.

juliusknorr commented Nov 27, 2023

pulsejet commented Nov 27, 2023 • edited Loading

juliusknorr commented Nov 28, 2023

juliusknorr commented Nov 28, 2023

juliusknorr commented Nov 28, 2023

pulsejet commented Nov 28, 2023 • edited Loading

juliusknorr commented Nov 29, 2023

juliusknorr commented Nov 29, 2023

juliusknorr commented Nov 29, 2023

artonge commented Aug 18, 2023 •

edited by juliusknorr

Loading

skjnldsv left a comment •

edited

Loading

artonge commented Aug 24, 2023 •

edited

Loading

pulsejet commented Nov 27, 2023 •

edited

Loading

pulsejet commented Nov 28, 2023 •

edited

Loading