Skip to content

refactor(demo): fetch the BPMN diagrams#287

Merged
tbouffard merged 12 commits into
mainfrom
refactor/GH-72_bpmn_diagram_out_of_the_js_chunks
Sep 11, 2024
Merged

refactor(demo): fetch the BPMN diagrams#287
tbouffard merged 12 commits into
mainfrom
refactor/GH-72_bpmn_diagram_out_of_the_js_chunks

Conversation

@tbouffard

@tbouffard tbouffard commented Sep 5, 2024

Copy link
Copy Markdown
Member

Previously, the diagram was stored in JavaScript chunks.
This increased the size of the chunks and did not reflect what an application generally does: it does not store diagrams, they are retrieved from services or APIs.
Fetching the diagram reduces the size of the JavaScript chunks and makes the demo closer to a real application.

Notes

Closes #72

Tasks

@tbouffard tbouffard added the refactoring Code refactoring label Sep 5, 2024
@github-actions

github-actions Bot commented Sep 5, 2024

Copy link
Copy Markdown

🎊 PR Preview 618d8c1 has been successfully built and deployed to https://process-analytics-bv-experimental-add-ons-demo-pr-287.surge.sh

🕐 Build time: 0.011s

🤖 By surge-preview

@tbouffard

tbouffard commented Sep 5, 2024

Copy link
Copy Markdown
Member Author

Produced Chunks

main

dist/pages/overlays.html                   1.46 kB │ gzip: 0.62 kB
dist/pages/path-resolver.html              1.51 kB │ gzip: 0.66 kB
dist/pages/plugins-by-name.html            1.64 kB │ gzip: 0.69 kB
dist/index.html                            1.90 kB │ gzip: 0.83 kB
dist/assets/index-CceZZ_di.css             0.28 kB │ gzip: 0.21 kB
dist/assets/zoom-component-CkXT8Sb8.css    0.93 kB │ gzip: 0.39 kB
dist/assets/overlays-CAncAuwP.css          1.18 kB │ gzip: 0.58 kB
dist/assets/bpmn-elements-EUig1k5G.js      0.93 kB │ gzip: 0.49 kB
dist/assets/plugins-by-name-Br2bUxuG.js    1.64 kB │ gzip: 0.82 kB
dist/assets/overlays-4ouCdMrd.js           1.82 kB │ gzip: 0.77 kB
dist/assets/path-resolver-_-5vpUfU.js      1.96 kB │ gzip: 0.87 kB
dist/assets/zoom-component-BKWEeOfi.js     2.05 kB │ gzip: 0.89 kB
dist/assets/diagram-Fq347Kh9.js          147.11 kB │ gzip: 38.07 kB 
dist/assets/mxgraph-DLXKxQT6.js          837.36 kB │ gzip: 188.71 kB

first implementation (duplicate diagram fetch in all demo entry points)

dist/pages/overlays.html                   1.46 kB │ gzip:   0.62 kB
dist/pages/path-resolver.html              1.52 kB │ gzip:   0.67 kB
dist/pages/plugins-by-name.html            1.65 kB │ gzip:   0.69 kB
dist/index.html                            1.90 kB │ gzip:   0.83 kB
dist/assets/index-CceZZ_di.css             0.28 kB │ gzip:   0.21 kB
dist/assets/zoom-component-CkXT8Sb8.css    0.93 kB │ gzip:   0.39 kB
dist/assets/overlays-CAgzppIG.css          1.16 kB │ gzip:   0.57 kB
dist/assets/bpmn-elements-CXeGZNFg.js      0.91 kB │ gzip:   0.49 kB
dist/assets/plugins-by-name-D6jzfHiG.js    1.66 kB │ gzip:   0.83 kB
dist/assets/overlays-bhU2ZXrk.js           1.88 kB │ gzip:   0.80 kB
dist/assets/zoom-component-C3BR7Pnp.js     1.88 kB │ gzip:   0.78 kB
dist/assets/path-resolver-DL0LYGTF.js      1.99 kB │ gzip:   0.88 kB
dist/assets/plugins-support-BAOwGmw6.js  132.32 kB │ gzip:  35.71 kB
dist/assets/mxgraph-BIDOqb5W.js          837.19 kB │ gzip: 188.70 kB

34b0b99 after introducing the fetchDiagram function

dist/pages/overlays.html                   1.46 kB │ gzip:   0.62 kB
dist/pages/path-resolver.html              1.51 kB │ gzip:   0.66 kB
dist/pages/plugins-by-name.html            1.64 kB │ gzip:   0.69 kB
dist/index.html                            1.90 kB │ gzip:   0.83 kB
dist/assets/index-CceZZ_di.css             0.28 kB │ gzip:   0.21 kB
dist/assets/zoom-component-CkXT8Sb8.css    0.93 kB │ gzip:   0.39 kB
dist/assets/overlays-CAgzppIG.css          1.16 kB │ gzip:   0.57 kB
dist/assets/bpmn-elements-IhSsAQYd.js      0.90 kB │ gzip:   0.49 kB
dist/assets/plugins-by-name-DMSb-1I6.js    1.62 kB │ gzip:   0.81 kB
dist/assets/overlays-BcPzdzAo.js           1.84 kB │ gzip:   0.78 kB
dist/assets/zoom-component-CLCxYDxS.js     1.87 kB │ gzip:   0.77 kB
dist/assets/path-resolver-CCof-T0d.js      1.95 kB │ gzip:   0.86 kB
dist/assets/diagrams-BLV6aRRk.js         132.43 kB │ gzip:  35.77 kB
dist/assets/mxgraph-BIDOqb5W.js          837.19 kB │ gzip: 188.70 kB

ef7f787 final commit, after using the "import URL" support provided by vite (https://vitejs.dev/guide/assets#importing-asset-as-url)

dist/pages/overlays.html                                 1.46 kB │ gzip:   0.62 kB
dist/pages/path-resolver.html                            1.50 kB │ gzip:   0.66 kB
dist/pages/plugins-by-name.html                          1.64 kB │ gzip:   0.69 kB
dist/index.html                                          1.90 kB │ gzip:   0.83 kB
dist/assets/EC-purchase-orders-collapsed-CqhR9i-M.xml   14.53 kB │ gzip:   2.33 kB
dist/assets/index-D6XUam5J.css                           0.41 kB │ gzip:   0.25 kB
dist/assets/zoom-component-CkXT8Sb8.css                  0.93 kB │ gzip:   0.39 kB
dist/assets/overlays-CAgzppIG.css                        1.16 kB │ gzip:   0.57 kB
dist/assets/plugins-by-name-CTz9EDnE.js                  1.01 kB │ gzip:   0.61 kB
dist/assets/style-DWpUStZ-.js                            1.80 kB │ gzip:   0.65 kB
dist/assets/overlays-CIARiPBH.js                         1.84 kB │ gzip:   0.78 kB
dist/assets/zoom-component-BuGXA7d2.js                   1.87 kB │ gzip:   0.78 kB
dist/assets/path-resolver-CB_hjd-s.js                    1.95 kB │ gzip:   0.86 kB
dist/assets/diagrams-DEbLyIOz.js                       132.47 kB │ gzip:  35.81 kB
dist/assets/mxgraph-BIDOqb5W.js                        837.19 kB │ gzip: 188.70 kB

@tbouffard tbouffard marked this pull request as ready for review September 9, 2024 06:04
@sonarqubecloud

Copy link
Copy Markdown

@tbouffard tbouffard left a comment

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✔️ Tested locally with the development server
✔️ Tested with the surge preview environment

@tbouffard tbouffard changed the title refactor(demo): fetch diagram instead of storing it in the JS chunk refactor(demo): fetch the BPMN diagrams Sep 11, 2024
@tbouffard tbouffard merged commit 000e02b into main Sep 11, 2024
@tbouffard tbouffard deleted the refactor/GH-72_bpmn_diagram_out_of_the_js_chunks branch September 11, 2024 12:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactoring Code refactoring

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[REFACTOR] Demo - fetch BPMN diagrams in projects instead of bundling them with the JS code

1 participant