williaster commented on a change in pull request #4727: [webpack] setup lazy loading for all visualizations URL: https://github.com/apache/incubator-superset/pull/4727#discussion_r179614390
########## File path: superset/assets/visualizations/main.js ########## @@ -51,53 +51,56 @@ export const VIZ_TYPES = { rose: 'rose', }; +const loadVis = promise => promise.then(module => module.default || module); + const vizMap = { - [VIZ_TYPES.area]: require('./nvd3_vis.js'), - [VIZ_TYPES.bar]: require('./nvd3_vis.js'), - [VIZ_TYPES.big_number]: require('./big_number.js'), - [VIZ_TYPES.big_number_total]: require('./big_number.js'), - [VIZ_TYPES.box_plot]: require('./nvd3_vis.js'), - [VIZ_TYPES.bubble]: require('./nvd3_vis.js'), - [VIZ_TYPES.bullet]: require('./nvd3_vis.js'), - [VIZ_TYPES.cal_heatmap]: require('./cal_heatmap.js'), - [VIZ_TYPES.compare]: require('./nvd3_vis.js'), - [VIZ_TYPES.directed_force]: require('./directed_force.js'), - [VIZ_TYPES.chord]: require('./chord.jsx'), - [VIZ_TYPES.dist_bar]: require('./nvd3_vis.js'), - [VIZ_TYPES.filter_box]: require('./filter_box.jsx'), - [VIZ_TYPES.heatmap]: require('./heatmap.js'), - [VIZ_TYPES.histogram]: require('./histogram.js'), - [VIZ_TYPES.horizon]: require('./horizon.js'), - [VIZ_TYPES.iframe]: require('./iframe.js'), - [VIZ_TYPES.line]: require('./nvd3_vis.js'), - [VIZ_TYPES.time_pivot]: require('./nvd3_vis.js'), - [VIZ_TYPES.mapbox]: require('./mapbox.jsx'), - [VIZ_TYPES.markup]: require('./markup.js'), - [VIZ_TYPES.para]: require('./parallel_coordinates.js'), - [VIZ_TYPES.pie]: require('./nvd3_vis.js'), - [VIZ_TYPES.pivot_table]: require('./pivot_table.js'), - [VIZ_TYPES.sankey]: require('./sankey.js'), - [VIZ_TYPES.separator]: require('./markup.js'), - [VIZ_TYPES.sunburst]: require('./sunburst.js'), - [VIZ_TYPES.table]: require('./table.js'), - [VIZ_TYPES.time_table]: require('./time_table.jsx'), - [VIZ_TYPES.treemap]: require('./treemap.js'), - [VIZ_TYPES.country_map]: require('./country_map.js'), - [VIZ_TYPES.word_cloud]: require('./word_cloud.js'), - [VIZ_TYPES.world_map]: require('./world_map.js'), - [VIZ_TYPES.dual_line]: require('./nvd3_vis.js'), - [VIZ_TYPES.event_flow]: require('./EventFlow.jsx'), - [VIZ_TYPES.paired_ttest]: require('./paired_ttest.jsx'), - [VIZ_TYPES.partition]: require('./partition.js'), - [VIZ_TYPES.deck_scatter]: require('./deckgl/layers/scatter.jsx').default, - [VIZ_TYPES.deck_screengrid]: require('./deckgl/layers/screengrid.jsx').default, - [VIZ_TYPES.deck_grid]: require('./deckgl/layers/grid.jsx').default, - [VIZ_TYPES.deck_hex]: require('./deckgl/layers/hex.jsx').default, - [VIZ_TYPES.deck_path]: require('./deckgl/layers/path.jsx').default, - [VIZ_TYPES.deck_geojson]: require('./deckgl/layers/geojson.jsx').default, - [VIZ_TYPES.deck_arc]: require('./deckgl/layers/arc.jsx').default, - [VIZ_TYPES.deck_polygon]: require('./deckgl/layers/polygon.jsx').default, - [VIZ_TYPES.deck_multi]: require('./deckgl/multi.jsx'), - [VIZ_TYPES.rose]: require('./rose.js'), + [VIZ_TYPES.area]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.bar]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.big_number]: () => loadVis(import(/* webpackChunkName: "big_number" */ './big_number.js')), + [VIZ_TYPES.big_number_total]: () => loadVis(import(/* webpackChunkName: "big_number" */ './big_number.js')), + [VIZ_TYPES.box_plot]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.bubble]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.bullet]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.cal_heatmap]: () => loadVis(import(/* webpackChunkName: "cal_heatmap" */ './cal_heatmap.js')), + [VIZ_TYPES.compare]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.directed_force]: () => loadVis(import(/* webpackChunkName: "directed_force" */ './directed_force.js')), + [VIZ_TYPES.chord]: () => loadVis(import(/* webpackChunkName: "chord" */ './chord.jsx')), + [VIZ_TYPES.dist_bar]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.filter_box]: () => loadVis(import(/* webpackChunkName: "filter_box" */ './filter_box.jsx')), + [VIZ_TYPES.heatmap]: () => loadVis(import(/* webpackChunkName: "heatmap" */ './heatmap.js')), + [VIZ_TYPES.histogram]: () => loadVis(import(/* webpackChunkName: "histogram" */ './histogram.js')), + [VIZ_TYPES.horizon]: () => loadVis(import(/* webpackChunkName: "horizon" */ './horizon.js')), + [VIZ_TYPES.iframe]: () => loadVis(import(/* webpackChunkName: "iframe" */ './iframe.js')), + [VIZ_TYPES.line]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.time_pivot]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.mapbox]: () => loadVis(import(/* webpackChunkName: "mapbox" */ './mapbox.jsx')), + [VIZ_TYPES.markup]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')), + [VIZ_TYPES.para]: () => loadVis(import(/* webpackChunkName: "parallel_coordinates" */ './parallel_coordinates.js')), + [VIZ_TYPES.pie]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.pivot_table]: () => loadVis(import(/* webpackChunkName: "pivot_table" */ './pivot_table.js')), + [VIZ_TYPES.sankey]: () => loadVis(import(/* webpackChunkName: "sankey" */ './sankey.js')), + [VIZ_TYPES.separator]: () => loadVis(import(/* webpackChunkName: "markup" */ './markup.js')), + [VIZ_TYPES.sunburst]: () => loadVis(import(/* webpackChunkName: "sunburst" */ './sunburst.js')), + [VIZ_TYPES.table]: () => loadVis(import(/* webpackChunkName: "table" */ './table.js')), + [VIZ_TYPES.time_table]: () => loadVis(import(/* webpackChunkName: "time_table" */ './time_table.jsx')), + [VIZ_TYPES.treemap]: () => loadVis(import(/* webpackChunkName: "treemap" */ './treemap.js')), + [VIZ_TYPES.country_map]: () => loadVis(import(/* webpackChunkName: "country_map" */ './country_map.js')), + [VIZ_TYPES.word_cloud]: () => loadVis(import(/* webpackChunkName: "word_cloud" */ './word_cloud.js')), + [VIZ_TYPES.world_map]: () => loadVis(import(/* webpackChunkName: "world_map" */ './world_map.js')), + [VIZ_TYPES.dual_line]: () => loadVis(import(/* webpackChunkName: "nvd3_vis" */ './nvd3_vis.js')), + [VIZ_TYPES.event_flow]: () => loadVis(import(/* webpackChunkName: "EventFlow" */ './EventFlow.jsx')), + [VIZ_TYPES.paired_ttest]: () => loadVis(import(/* webpackChunkName: "paired_ttest" */ './paired_ttest.jsx')), + [VIZ_TYPES.partition]: () => loadVis(import(/* webpackChunkName: "partition" */ './partition.js')), + [VIZ_TYPES.deck_scatter]: () => loadVis(import(/* webpackChunkName: "deckgl/layers/scatter" */ './deckgl/layers/scatter.jsx')), Review comment: What's the goal here? for readability or to have all of that code in one chunk? I think using the same chunk name would only work if the same code was imported which is currently not possible since there are multiple index files for the various deck gl layers, right? ---------------------------------------------------------------- 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