[perf] add webpack 4 + SplitChunks + lazy load visualizations (#5240)

* [webpack] setup lazy loading for all visualizations

* [lazy-load] push renderVis function to <Chart /> state

* no mapbox token

* [lazy loading] use native webpack import func to fix chunk names, add babel-plugin-syntax-dynamic-import, fix rebase bug.

* fix geojson import, undefined t, and fix async css bug

* [lazy load] actually add babel-plugin-syntax-dynamic-import

* [webpack] working dev version of webpack v4

* [webpack 4] fix url issues, use mini-css-extract-plugin and webpack-assets-manifest plugins

* [webpack 4] use splitchunks for all files, update templates to multi-file entrypoints

* [webpack 4] multiple theme entry files for markup vis css, don't uglify mapbox

* [webpack 4] lint python manifest changes, update yarn lock.

* [webpack 4] fix tests with babel-plugin-dynamic-import-node

* [webpack 4] only use 'dynamic-import-node' plugin in tests, update <Chart /> vis promise when vis type changes

* [webpack 4] clean up package.json and yarn.lock after rebase

* [webpack 4] lint?

* [webpack 4] lint for real

* [webpack 4][istanbul] ignore visualizations/index.js

superset/__init__.py

@@ -47,23 +47,37 @@ def parse_manifest_json():
     global manifest
     try:
         with open(MANIFEST_FILE, 'r') as f:
-            manifest = json.load(f)
+            # the manifest inclues non-entry files
+            # we only need entries in templates
+            full_manifest = json.load(f)
+            manifest = full_manifest.get('entrypoints', {})
     except Exception:
         pass
 
 
-def get_manifest_file(filename):
+def get_js_manifest_files(filename):
     if app.debug:
         parse_manifest_json()
-    return '/static/assets/dist/' + manifest.get(filename, '')
+    entry_files = manifest.get(filename, {})
+    return entry_files.get('js', [])
+
+
+def get_css_manifest_files(filename):
+    if app.debug:
+        parse_manifest_json()
+    entry_files = manifest.get(filename, {})
+    return entry_files.get('css', [])
 
 
 parse_manifest_json()
 
 
 @app.context_processor
-def get_js_manifest():
-    return dict(js_manifest=get_manifest_file)
+def get_manifest():
+    return dict(
+        js_manifest=get_js_manifest_files,
+        css_manifest=get_css_manifest_files,
+    )
 
 
 #################################################################

superset/assets/.babelrc

@@ -1,3 +1,4 @@
 {
-  "presets" : ["airbnb"],
+  "presets" : ["airbnb", "react", "env"],
+  "plugins": ["syntax-dynamic-import"],
 }

superset/assets/.eslintrc

@@ -1,6 +1,7 @@
 {
   "extends": "airbnb",
-  "parserOptions":{
+  "parser": "babel-eslint",
+  "parserOptions": {
     "ecmaFeatures": {
       "experimentalObjectRestSpread": true
     }

superset/assets/.istanbul.yml

@@ -3,7 +3,8 @@ instrumentation:
     root: './src'
     extensions: ['.js', '.jsx']
     excludes: [
-        'dist/**'
+        'dist/**',
+        'visualizations/index.js',
     ]
     embed-source: false
     variable: __coverage__

superset/assets/package.json

@@ -9,12 +9,10 @@
   },
   "scripts": {
     "test": "mocha --require ignore-styles --compilers js:babel-core/register --require spec/helpers/browser.js --recursive spec/**/*_spec.*",
-    "cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --require ignore-styles spec/helpers/browser.js --recursive spec/**/*_spec.*",
-    "dev": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool eval-cheap-source-map",
-    "dev-slow": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool inline-source-map",
-    "dev-fast": "echo 'dev-fast in now replaced by dev'",
-    "prod": "NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js -p --colors --progress",
-    "build": "NODE_ENV=production webpack --colors --progress",
+    "cover": "babel-node node_modules/.bin/babel-istanbul cover _mocha -- --compilers babel-core/register --require spec/helpers/browser.js --require ignore-styles --recursive spec/**/*_spec.*",
+    "dev": "webpack --mode=development --colors --progress --debug --watch",
+    "prod": "node --max_old_space_size=4096 webpack --mode=production --colors --progress",
+    "build": "webpack --mode=production --colors --progress",
     "lint": "eslint --ignore-path=.eslintignore --ext .js,.jsx .",
     "lint-fix": "eslint --fix --ignore-path=.eslintignore --ext .js,.jsx .",
     "sync-backend": "babel-node --presets env src/syncBackend.js"
@@ -39,6 +37,9 @@
   "bugs": {
     "url": "https://github.com/apache/incubator-superset/issues"
   },
+  "engines": {
+    "node": ">= 6.11.5 <7.0.0 || >= 8.9.0"
+  },
   "homepage": "http://superset.apache.org/",
   "dependencies": {
     "//": "known issues with react-bootstrap>=0.32",
@@ -116,19 +117,21 @@
     "supercluster": "https://github.com/georgeke/supercluster/tarball/ac3492737e7ce98e07af679623aad452373bbc40",
     "underscore": "^1.8.3",
     "urijs": "^1.18.10",
-    "viewport-mercator-project": "^5.0.0",
-    "webpack-cli": "^2.1.4"
+    "viewport-mercator-project": "^5.0.0"
   },
   "devDependencies": {
     "babel-cli": "^6.14.0",
     "babel-core": "^6.10.4",
+    "babel-eslint": "^8.2.2",
     "babel-istanbul": "^0.12.2",
-    "babel-loader": "^7.0.0",
+    "babel-loader": "^7.1.4",
     "babel-plugin-css-modules-transform": "^1.1.0",
+    "babel-plugin-dynamic-import-node": "^1.2.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-polyfill": "^6.23.0",
     "babel-preset-airbnb": "^2.1.1",
     "chai": "^4.0.2",
-    "clean-webpack-plugin": "^0.1.16",
+    "clean-webpack-plugin": "^0.1.19",
     "css-loader": "^0.28.0",
     "enzyme": "^2.0.0",
     "eslint": "^4.19.0",
@@ -137,16 +140,16 @@
     "eslint-plugin-jsx-a11y": "^5.1.1",
     "eslint-plugin-react": "^7.0.1",
     "exports-loader": "^0.7.0",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "^0.11.1",
+    "file-loader": "^1.1.11",
     "github-changes": "^1.0.4",
     "ignore-styles": "^5.0.1",
     "imports-loader": "^0.7.1",
     "istanbul": "^1.0.0-alpha",
     "jsdom": "9.12.0",
     "json-loader": "^0.5.4",
     "less": "^2.6.1",
-    "less-loader": "^4.0.3",
+    "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "mocha": "^3.2.0",
     "npm-check-updates": "^2.14.0",
     "react-addons-test-utils": "^15.6.2",
@@ -157,10 +160,10 @@
     "style-loader": "^0.21.0",
     "transform-loader": "^0.2.3",
     "uglifyjs-webpack-plugin": "^1.1.0",
-    "url-loader": "^0.6.2",
-    "//": "Known issues with >=4",
-    "webpack": "^3.10.0",
-    "webpack-manifest-plugin": "2.0.3",
-    "webworkify-webpack": "2.1.2"
+    "url-loader": "^1.0.1",
+    "webpack": "^4.6.0",
+    "webpack-assets-manifest": "^3.0.1",
+    "webpack-cli": "^2.0.10",
+    "webpack-sources": "^1.1.0"
   }
 }

superset/assets/spec/helpers/browser.js

@@ -3,7 +3,12 @@ import 'babel-polyfill';
 import chai from 'chai';
 import jsdom from 'jsdom';
 
-require('babel-register')();
+require('babel-register')({
+  // NOTE: If `dynamic-import-node` is in .babelrc alongside
+  // `syntax-dynamic-import` it breaks webpack's bundle splitting capability.
+  // So only load during runtime on the node-side (in tests)
+  plugins: ['dynamic-import-node'],
+});
 
 const exposedProperties = ['window', 'navigator', 'document'];
 

superset/assets/spec/javascripts/chart/Chart_spec.jsx

@@ -38,10 +38,10 @@ describe('Chart', () => {
       <Chart {...mockedProps} />,
     );
   });
-  describe('renderViz', () => {
+  describe('renderVis', () => {
     let stub;
     beforeEach(() => {
-      stub = sinon.stub(wrapper.instance(), 'renderViz');
+      stub = sinon.stub(wrapper.instance(), 'renderVis');
     });
     afterEach(() => {
       stub.restore();