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 Chunks Chunk Names deckgl/layers/grid.a8beccbf9f5b13e97f98.chunk.js 8.74 kB 32 [emitted] deckgl/layers/grid f4769f9bdb7466be65088239c12046d1.eot 20.1 kB [emitted] fa2772327f55d8198301fdb8bcfc8158.woff 23.4 kB [emitted] e18bbf611f2a2e43afc071aa2f4e1512.ttf 45.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.js 2.08 MB 3 [emitted] [big] pivot_table parallel_coordinates.0d0923b8adf4d520192a.chunk.js 204 kB 4 [emitted] parallel_coordinates EventFlow.04abc2ccfab65027f920.chunk.js 2.57 MB 5 [emitted] [big] EventFlow big_number.39d33798fefe5e02632e.chunk.js 41.8 kB 6 [emitted] big_number markup.0ee56d948bd6cc1366fb.chunk.js 14.7 kB 7 [emitted] markup filter_box.f76d5a45eff1c943db92.chunk.js 12 MB 8 [emitted] [big] filter_box time_table.49446835d78c8f19c439.chunk.js 1.51 MB 9 [emitted] [big] time_table mapbox.b927c5a82390d9078f99.chunk.js 4.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.js 2.09 MB 16 [emitted] [big] table cal_heatmap.ed95b9fdabe40cb02ef1.chunk.js 348 kB 17 [emitted] [big] cal_heatmap world_map.3264a79e4259d761f4d0.chunk.js 941 kB 18 [emitted] [big] world_map word_cloud.477219c719efaab54f7c.chunk.js 45 kB 19 [emitted] word_cloud rose.92eafeac459006bad4bb.chunk.js 1.71 MB 20 [emitted] [big] rose histogram.d7ce608c93c52607b696.chunk.js 1.67 MB 21 [emitted] [big] histogram treemap.f657e9f0a66f67c589ad.chunk.js 30 kB 22 [emitted] treemap sunburst.5f07e304baedb2a39c0b.chunk.js 32.8 kB 23 [emitted] sunburst horizon.e8fba3db7283b0ab2024.chunk.js 18.9 kB 24 [emitted] horizon directed_force.fcb6d26cd1fb2ae8add4.chunk.js 13.2 kB 25 [emitted] directed_force country_map.c8e1683afb91b70582a1.chunk.js 16.7 kB 26 [emitted] country_map chord.d71d2fe59ff59c02121e.chunk.js 9.73 kB 27 [emitted] chord iframe.69c65c5f3fa42de0c8cf.chunk.js 1.8 kB 28 [emitted] iframe deckgl/layers/polygon.3966937d1db2f1cdb4a1.chunk.js 6.75 kB 29 [emitted] deckgl/layers/polygon deckgl/layers/path.47d1db5dd97d1e3f1535.chunk.js 7.42 kB 30 [emitted] deckgl/layers/path deckgl/layers/hex.083fdc0e9eca06b50949.chunk.js 8.73 kB 31 [emitted] deckgl/layers/hex 448c34a56d699c29117adc64c43affeb.woff2 18 kB [emitted] deckgl/layers/geojson.5e20b6a30b660329c019.chunk.js 12.1 kB 33 [emitted] deckgl/layers/geojson deckgl/layers/arc.25cc2674046fd18c85a1.chunk.js 7.39 kB 34 [emitted] deckgl/layers/arc explore.69fb457561dcb2f21746.entry.js 25.6 MB 35, 42 [emitted] [big] explore sqllab.36c8988d9f36129a9183.entry.js 19.8 MB 36, 42 [emitted] [big] sqllab dashboard.0a0c8aac20bdcac368aa.entry.js 15.4 MB 37, 42 [emitted] [big] dashboard profile.fa297a173d6a9ae45a79.entry.js 8.71 MB 38, 42 [emitted] [big] profile addSlice.88e25db9764403cb2f42.entry.js 9.32 MB 39, 42 [emitted] [big] addSlice welcome.faa2156ccf68061b0f8a.entry.js 8.64 MB 40, 42 [emitted] [big] welcome deckgl.fb9e56a3bf69cd1ce139.chunk.js 8.7 MB 41 [emitted] [big] deckgl common.32169c889bb0080def09.entry.js 3.99 MB 42 [emitted] [big] common theme.489716a5e871d9900102.entry.js 6.15 kB 43 [emitted] theme ``` The sad part is that this new deck.gl chunk doesn't load properly 😢 will keep digging a bit but may have to abandon it, or go talk to one of our web perf folks to see if they can help point me in the right direction. Sounds like there are many improvements for these exact thing in `webpack v4`, so we could consider upgrading to that (it will require new versions of node, so we'd need to specify `engine: { node: '^8.9.4' }` in the package.json, among other upgrades to webpack plugins, etc.)
---------------------------------------------------------------- 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
