[GitHub] williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations
williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations URL: https://github.com/apache/incubator-superset/pull/4727#issuecomment-385803221 > I'm guessing the load time improvements have to do with the fact that some of the work can be started upfront while the bundles are downloading Yes, and this is great from a user perspective because it doesn't block page render like it currently does. I think this will have the effect of making users feel like the page is loading _much_ faster. > I'm thinking for visualizations that use React, they shouldn't have to import it and should somehow pick it up from global, same goes for jquery and perhaps a set of other things. React [is not that large](https://bundlephobia.com/result?p=react@16.3.2) (even smaller if we could actually upgrade to `16.0.0`) and I can't tell if you mean literal globals (`window.jquery`) but we should move away from that pattern (and `jquery` in general, it's just syntactic sugar for JS and ideally we'd be using fetch not ajax) rather than embrace it. It seems like the proper way to pull out "globally shared" code is using the webpack `CommonChunksPlugin`, if chunks share code it will pull them into a new chunk. I used this to create a separate `chunk` for all shared deck.gl code, and I also added it in a way that it _should_ pull out all shared code into a separate chunk if it is imported by >=2 modules ... BUT this didn't appear to have any effect so the vis chunks must not really share that much code 路♀️ This is the new final webpack output (note the deckgl layer size decreases, and the new larger `deckgl.fb9e56a3bf69cd1ce139.chunk.js`): ``` Version: webpack 3.11.0 Time: 46756ms Asset Size ChunksChunk Names deckgl/layers/grid.a8beccbf9f5b13e97f98.chunk.js8.74 kB 32 [emitted] deckgl/layers/grid f4769f9bdb7466be65088239c12046d1.eot20.1 kB [emitted] fa2772327f55d8198301fdb8bcfc8158.woff23.4 kB [emitted] e18bbf611f2a2e43afc071aa2f4e1512.ttf45.4 kB [emitted] 89889688147bd7575d6327160d64e760.svg 109 kB [emitted] nvd3_vis.7b1466ac696cd8d30467.chunk.js 6.8 MB 0 [emitted] [big] nvd3_vis sankey.0da04cf564e3607b0313.chunk.js 268 kB 1 [emitted] [big] sankey paired_ttest.d9654f93c94179c43de4.chunk.js 304 kB 2 [emitted] [big] paired_ttest pivot_table.752772a0c72696357184.chunk.js2.08 MB 3 [emitted] [big] pivot_table parallel_coordinates.0d0923b8adf4d520192a.chunk.js 204 kB 4 [emitted] parallel_coordinates EventFlow.04abc2ccfab65027f920.chunk.js2.57 MB 5 [emitted] [big] EventFlow big_number.39d33798fefe5e02632e.chunk.js41.8 kB 6 [emitted] big_number markup.0ee56d948bd6cc1366fb.chunk.js14.7 kB 7 [emitted] markup filter_box.f76d5a45eff1c943db92.chunk.js 12 MB 8 [emitted] [big] filter_box time_table.49446835d78c8f19c439.chunk.js1.51 MB 9 [emitted] [big] time_table mapbox.b927c5a82390d9078f99.chunk.js4.43 MB 10 [emitted] [big] mapbox partition.408cf680da8bcce8ad58.chunk.js 159 kB 11 [emitted] partition deckgl/multi.bced534d9159ab18934d.chunk.js 512 kB 12, 13, 14, 29, 30, 31, 32, 33, 34 [emitted] [big] deckgl/multi deckgl/layers/scatter.ce1c712e5113e386fc6a.chunk.js 429 kB 13 [emitted] [big] deckgl/layers/scatter deckgl/layers/screengrid.3619502e1991df96e5d5.chunk.js 400 kB 14 [emitted] [big] deckgl/layers/screengrid heatmap.a587cf5f653617b1305a.chunk.js 108 kB 15 [emitted] heatmap table.48aed4719820c3e79b32.chunk.js2.09 MB 16 [emitted] [big] table cal_heatmap.ed95b9fdabe40cb02ef1.chunk.js 348 kB 17 [emitted] [big] cal_heatmap
[GitHub] williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations
williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations URL: https://github.com/apache/incubator-superset/pull/4727#issuecomment-385716957 I can give deck.gl a shot if you want tho, I think the d3 bundle is almost over optimizing. That'll be harder to untangle potentially as we refactor vis libraries. This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services
[GitHub] williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations
williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations URL: https://github.com/apache/incubator-superset/pull/4727#issuecomment-385716957 I can give deck.gl a shot if you want tho, I think the d3 bundle is almost over optimizing. That'll be harder to untangle potential totally as we refactor vis libraries. This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services
[GitHub] williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations
williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations URL: https://github.com/apache/incubator-superset/pull/4727#issuecomment-385715788 It's not as trivial as using the same chunk name. The final name consists of chunk name and hash. I'd rather do that optimization in another PR because I think you'd have to create an index file that exports all of deckgl and async import that file. I'm not as familiar with the deckgl code organization so you all might be best suited to do that? This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services
[GitHub] williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations
williaster commented on issue #4727: [webpack] setup lazy loading for all
visualizations
URL:
https://github.com/apache/incubator-superset/pull/4727#issuecomment-385615006
I got chunk names to update (see exact webpack input / output below) and
wanted to post some numbers from local dashboard testing which all look pretty
good:
- average total payload **decreased by 5 MB**
- DOM content load time **decreased 3.4s**
- Page load time **decreased 1.1s**
- the average # requests **increased by 6**
| Total payload (MB) | |
-- | -- | -- | --
Dashboard | Before | After |
Births example | 12.4 | 6.9 | -5.5
World data example | 12.4 | 8.7 | -3.7
Misc charts example | 14.9 | 8.5 | -6.4
Misc charts example w Deck gl | 15.4 | 11.1 | -4.3
| DOM content loaded (seconds) | |
-- | -- | -- | --
Dashboard | Before | After | Delta
Births example | 7.69 | 2.93 | -4.76
World data example | 6.58 | 2.63 | -3.95
Misc charts example | 6.38 | 3.88 | -2.50
Misc charts example w Deck gl | 6.20 | 2.71 | -3.49
| Total time (seconds) | |
-- | -- | -- | --
Dashboard | Before | After | Delta
Births example | 9.25 | 6.87 | -2.38
World data example | 9.22 | 6.78 | -2.44
Misc charts example | 7.69 | 5.53 | -2.16
Misc charts example w Deck gl | 7.73 | 10.19 | +2.45
| Requests (count) | |
-- | -- | -- | --
Dashboard | Before | After | Delta
Births example | 32 | 36 | +4
World data example | 29 | 34 | +5
Misc charts example | 45 | 53 | +8
Misc charts example w Deck gl | 59 | 67 | +8
webpack output before
```
Hash: 09e816a63d54c8a794f4
Version: webpack 3.10.0
Time: 44176ms (44s)
Asset Size Chunks
Chunk Names
welcome.f1949d0f24772fdd90be.entry.js8.49 MB5, 6 [emitted] [big]
welcome
f4769f9bdb7466be65088239c12046d1.eot20.1 kB [emitted]
fa2772327f55d8198301fdb8bcfc8158.woff23.4 kB [emitted]
e18bbf611f2a2e43afc071aa2f4e1512.ttf45.4 kB [emitted]
89889688147bd7575d6327160d64e760.svg 109 kB [emitted]
dashboard.7aae3890d2f0d6521e6e.entry.js48.1 MB0, 6 [emitted] [big]
dashboard
explore.7876f80fe4be57a17e6c.entry.js46.3 MB1, 6 [emitted] [big]
explore
sqllab.80cb1149088d4df08c50.entry.js17.8 MB2, 6 [emitted] [big]
sqllab
profile.87ba695abcd8682ad921.entry.js8.57 MB3, 6 [emitted] [big]
profile
addSlice.f27f6a8368fce90f27ca.entry.js9.18 MB4, 6 [emitted] [big]
addSlice
448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted]
common.540032da3aeaf1cdc78e.entry.js3.85 MB 6 [emitted] [big]
common
theme.912f2edddcf1890cf5f2.entry.js6.12 kB 7 [emitted]
theme
theme.912f2edddcf1890cf5f2.css 321 kB 7 [emitted] [big]
theme
explore.7876f80fe4be57a17e6c.css85.5 kB1, 6 [emitted]
explore
dashboard.7aae3890d2f0d6521e6e.css92.9 kB0, 6 [emitted]
dashboard
sqllab.80cb1149088d4df08c50.css7.01 kB2, 6 [emitted]
sqllab
welcome.f1949d0f24772fdd90be.css 846 bytes5, 6 [emitted]
welcome
profile.87ba695abcd8682ad921.css1.04 kB3, 6 [emitted]
profile
manifest.json1.17 kB [emitted]
[31] ./src/locales.jsx 5.63 kB {0} {1} {2} {3} {4} {5} {6} [built]
[544] ./src/common.js 1.52 kB {0} {1} {2} {3} {4} {5} {6} [built]
[2877] ./src/theme.js 152 bytes {7} [built]
[2879] ./stylesheets/react-select/select.less 41 bytes {7} [built]
[2881] multi babel-polyfill ./src/addSlice/index.jsx 40 bytes {4} [built]
[2882] ./src/addSlice/index.jsx 793 bytes {4} [built]
[2884] multi babel-polyfill ./src/explore/index.jsx 40 bytes {1} [built]
[2885] ./src/explore/index.jsx 3.53 kB {1} [built]
[2910] multi babel-polyfill ./src/dashboard/index.jsx 40 bytes {0} [built]
[2911] ./src/dashboard/index.jsx 1.47 kB {0} [built]
[2976] multi babel-polyfill ./src/SqlLab/index.jsx 40 bytes {2} [built]
[2977] ./src/SqlLab/index.jsx 1.55 kB {2} [built]
[3062] multi babel-polyfill ./src/welcome/index.jsx 40 bytes {5} [built]
[3066] multi babel-polyfill ./src/profile/index.jsx 40 bytes {3} [built]
[3067] ./src/profile/index.jsx 775 bytes {3} [built]
+ 3119 hidden modules
```
webpack output after
```
Hash: 460ae189f7f00025375d
Version: webpack 3.11.0
Time: 45052ms
Asset Size
ChunksChunk Names
parallel_coordinates.e19f30010f7bbf13546b.chunk.js 204 kB
22 [emitted] parallel_coordinates
f4769f9bdb7466be65088239c12046d1.eot
[GitHub] williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations
williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations URL: https://github.com/apache/incubator-superset/pull/4727#issuecomment-383815779 sorry progress has been slower than expected, have been slammed with other projects including a focused sprint this week. will make this a priority to test early next week. This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services
[GitHub] williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations
williaster commented on issue #4727: [webpack] setup lazy loading for all visualizations URL: https://github.com/apache/incubator-superset/pull/4727#issuecomment-379091611 fyi hitting some issues testing this with prod data, still working on it. should be able to get the chunk files to have names that match the name in the code This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: us...@infra.apache.org With regards, Apache Git Services
