Add async usage for xlsx

Author: Marc-Andre-Rivet

.circleci/config.yml

@@ -31,7 +31,7 @@ jobs:
                     python -m venv venv || virtualenv venv
                     . venv/bin/activate
                     pip install -r dev-requirements.txt --quiet
-                    git clone --depth 1 [email protected]:plotly/dash.git dash-main
+                    git clone --depth 1 -b exp-dynamic [email protected]:plotly/dash.git dash-main
                     pip install -e ./dash-main[dev] --quiet
 
             - run:
@@ -107,7 +107,7 @@ jobs:
                     python -m venv venv || virtualenv venv
                     . venv/bin/activate
                     pip install -r dev-requirements.txt --quiet
-                    git clone --depth 1 [email protected]:plotly/dash.git dash-main
+                    git clone --depth 1 -b exp-dynamic [email protected]:plotly/dash.git dash-main
                     pip install -e ./dash-main[dev] --quiet
 
             - run:
@@ -212,7 +212,7 @@ jobs:
                 name: Install dependencies (dash)
                 command: |
                     . venv/bin/activate
-                    git clone --depth 1 [email protected]:plotly/dash.git dash-main
+                    git clone --depth 1 -b exp-dynamic [email protected]:plotly/dash.git dash-main
                     pip install -e ./dash-main[dev,testing] --quiet
                     cd dash-main/dash-renderer && npm run build && pip install -e . && cd ../..
 

.config/webpack/base.js

@@ -1,12 +1,15 @@
-
 const path = require('path');
+const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
+
+const basePreprocessing = require('./base.preprocessing');
 const packagejson = require('./../../package.json');
 
 const dashLibraryName = packagejson.name.replace(/-/g, '_');
 
+
 module.exports = (options = {}) => {
     const babel = options.babel || undefined;
-    const preprocessor = options.preprocessor || {};
+    const preprocessor = basePreprocessing(options.preprocessor);
     const mode = options.mode || 'development';
     const ts = options.ts || {};
 
@@ -24,6 +27,7 @@ module.exports = (options = {}) => {
         mode: mode,
         output: {
             path: path.resolve(__dirname, `./../../${dashLibraryName}`),
+            chunkFilename: '[name].js',
             filename: '[name].js',
             library: dashLibraryName,
             libraryTarget: 'window'
@@ -87,6 +91,20 @@ module.exports = (options = {}) => {
                 tests: path.resolve('./tests')
             },
             extensions: ['.js', '.ts', '.tsx']
-        }
+        },
+        optimization: {
+            splitChunks: {
+                chunks: 'async',
+                name: true,
+                cacheGroups: {
+                    async: {
+
+                    }
+                }
+            }
+        },
+        plugins: [
+            new WebpackDashDynamicImport()
+        ]
     };
 };

.config/webpack/base.preprocessing.js

@@ -0,0 +1,7 @@
+module.exports = ({ definitions, variables, ...options } = {}) => ({
+    ...options,
+    definitions: definitions || [],
+    variables: Object.assign({
+        mode: 'lazy'
+    }, variables || {})
+});

.storybook/webpack.config.js

@@ -1,8 +1,14 @@
 let babel = require('./babel.config.js');
 let config = require('./../.config/webpack/base.js')({
-    babel
+    babel,
+    preprocessor: {
+        variables: {
+            mode: 'eager'
+        }
+    }
 });
 
 config.externals = {};
+delete config.plugins;
 
 module.exports = config;

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+### Changed
+- [#554](https://github.com/plotly/dash-table/pull/554) Async loading of `xlsx` library on export
+
 ## [4.4.1] - 2019-08-17
 ### Fixed
 - [#618](https://github.com/plotly/dash-table/issues/618) Fix a bug with keyboard navigation not working correctly in certain circumstances when the table contains `readonly` columns.

MANIFEST.in

@@ -1,5 +1,7 @@
 include dash_table/bundle.js
 include dash_table/bundle.js.map
+include dash_table/async~*.js
+include dash_table/async~*.js.map
 include dash_table/metadata.json
 include dash_table/package-info.json
 include LICENSE

dash_table_base/__init__.py

@@ -44,6 +44,22 @@
         ).format(__version__),
         'namespace': package_name,
         'dynamic': True
+    },
+    {
+        'relative_package_path': 'async~export.js',
+        'external_url': (
+            'https://unpkg.com/dash-table@{}/dash_table/async~export.js'
+        ).format(__version__),
+        'namespace': package_name,
+        'async': True
+    },
+    {
+        'relative_package_path': 'async~export.js.map',
+        'external_url': (
+            'https://unpkg.com/dash-table@{}/dash_table/async~export.js.map'
+        ).format(__version__),
+        'namespace': package_name,
+        'dynamic': True
     }
 ]
 

package-lock.json

@@ -15,11 +15,11 @@
     "preprivate::opentests": "run-s private::wait*",
     "preprivate::test.server": "run-s private::wait_dash*",
     "preprivate::test.standalone": "run-s private::wait_js",
-    "pretest.standalone": "run-s private::build:js-test",
+    "pretest.standalone": "run-s private::build:js-test-standalone",
     "private::build": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack --display-reasons --bail",
     "private::build:js": "run-s \"private::build -- --mode production\"",
-    "private::build:js-dev": "run-s \"private::build -- --mode development --config webpack.dev.config.js\"",
     "private::build:js-test": "run-s \"private::build -- --mode development --config webpack.test.config.js\"",
+    "private::build:js-test-standalone": "run-s \"private::build -- --mode development --config webpack.test.standalone.config.js\"",
     "private::build:js-test-watch": "run-s \"private::build -- --mode development --config webpack.test.config.js --watch\"",
     "private::build:py": "dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json && cp dash_table_base/** dash_table/ && dash-generate-components src/dash-table/dash/DataTable.js dash_table -p package-info.json --r-prefix 'dash'",
     "private::host_dash8081": "python tests/cypress/dash/v_be_page.py",
@@ -61,6 +61,7 @@
   "devDependencies": {
     "@babel/cli": "^7.6.2",
     "@babel/core": "^7.6.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/polyfill": "^7.6.0",
     "@babel/preset-env": "^7.6.2",
     "@babel/preset-react": "^7.0.0",
@@ -70,6 +71,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "@percy/storybook": "^3.2.0",
+    "@plotly/webpack-dash-dynamic-import": "^1.0.0",
     "@storybook/cli": "^5.1.11",
     "@storybook/react": "^5.1.11",
     "@types/d3-format": "^1.3.1",

package.json

@@ -0,0 +1,5 @@
+export default class LazyLoader {
+    public static get xlsx() {
+        return import(/* webpackChunkName: "export", webpackMode: "$${{mode}}" */ 'xlsx');
+    }
+}