diff options
| author | mokha <mokha@cisco.com> | 2018-09-29 09:47:05 -0600 |
|---|---|---|
| committer | mokha <mokha@cisco.com> | 2018-09-29 09:47:05 -0600 |
| commit | fb63e5f976598dd23c0007497c201bd3f194c2ba (patch) | |
| tree | b5fbf89117076bfc81140ec93cdf2afe885ef17f | |
| parent | d0e5f3d19e83dc762381752fa917881afc97ab87 (diff) | |
use code splitting
| -rw-r--r-- | .babelrc | 1 | ||||
| -rw-r--r-- | package-lock.json | 6 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/component.js | 11 | ||||
| -rw-r--r-- | src/lazy.js | 1 |
5 files changed, 20 insertions, 0 deletions
@@ -1,4 +1,5 @@ { + "plugins": ["syntax-dynamic-import"], "presets": [ [ "env", diff --git a/package-lock.json b/package-lock.json index ed0ede9..5590e29 100644 --- a/package-lock.json +++ b/package-lock.json @@ -936,6 +936,12 @@ "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=", "dev": true }, + "babel-plugin-syntax-dynamic-import": { + "version": "6.18.0", + "resolved": "http://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", + "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=", + "dev": true + }, "babel-plugin-syntax-exponentiation-operator": { "version": "6.13.0", "resolved": "http://registry.npmjs.org/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz", diff --git a/package.json b/package.json index 6cce987..68ca4d1 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@babel/core": "^7.1.1", "autoprefixer": "^9.1.5", "babel-loader": "^8.0.4", + "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-preset-env": "^1.7.0", "css-loader": "^1.0.0", "file-loader": "^2.0.0", diff --git a/src/component.js b/src/component.js index 24cc9fd..3ac656d 100644 --- a/src/component.js +++ b/src/component.js @@ -2,5 +2,16 @@ export default (text = "Hello world") => { const element = document.createElement("div"); element.className = "pure-button"; element.innerHTML = text; + + element.onclick = () => { + import("./lazy") + .then(lazy => { + element.textContent = lazy.default; + }) + .catch(error => { + console.error(error); + }) + } + return element; }; diff --git a/src/lazy.js b/src/lazy.js new file mode 100644 index 0000000..110d543 --- /dev/null +++ b/src/lazy.js @@ -0,0 +1 @@ +export default "Hello from lazy"; |