wip code split

mapbox · Feb 19, 2018 · 16dc3fa · 16dc3fa
1 parent 802043a
commit 16dc3fa
Show file tree

Hide file tree

Showing 9 changed files with 106 additions and 75 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 /src_untyped
+/rollup/
 /docs/components/api.json
 /dist/mapbox-gl-dev.js
 /dist/mapbox-gl.js

diff --git a/build/rollup-plugin-worker-prelude.js b/build/rollup-plugin-worker-prelude.js
@@ -1,32 +1,12 @@
-import assert from 'assert';
 import MagicString from 'magic-string';
 
 export default function workerPrelude () {
     return {
         name: 'mapbox-gl-worker-prelude',
-        transformBundle: (source, {format}) => {
-            assert(format === 'umd');
-
-            const preludeString = 'function (global, factory) {\n';
-
+        transform: (source, id) => {
             const s = new MagicString(source);
-            s.appendRight(source.indexOf(preludeString) + preludeString.length, `
-    /* begin worker prelude */
-    const isWebWorker = (function () { try { return self instanceof WorkerGlobalScope; } catch(e) { return false; } })();
-    if (!isWebWorker) {
-        const _factory = factory;
-        factory = function () {
-            const bundleString = \`const mbgl = (\${_factory})();
-                mbgl._createWorker(self);\`;
-            const mbgl = _factory();
-            mbgl.workerUrl = window.URL.createObjectURL(
-                new Blob([bundleString], { type: 'text/javascript' })
-            );
-            return mbgl;
-        }
-    }
-    /* end worker prelude */
-`);
+            s.appendLeft(0, `function x() {\n`);
+            s.append(`}\n`);
 
             return {
                 code: s.toString(),

diff --git a/debug/index.html b/debug/index.html
@@ -15,26 +15,40 @@
 <div id='map'></div>
 
 <script>
-    console.time('load bundle')
-</script>
-<script src='/dist/mapboxgl-rollup.js'></script>
-<script>
-    console.timeEnd('load bundle')
+    window._start = performance.now();
+    console.time('load map')
 </script>
+<script src='/rollup/bundle.js'></script>
+<!--
+<script src='/dist/mapbox-gl-dev.js'></script>
+-->
 <script src='/debug/access_token_generated.js'></script>
 <script>
 
-console.time('load map')
 var map = window.map = new mapboxgl.Map({
     container: 'map',
     zoom: 12.5,
     center: [-77.01866, 38.888],
     style: 'mapbox://styles/mapbox/streets-v10',
     hash: true
 });
-map.once('load', () => {
-    console.timeEnd('load map');
-})
+// map.on('render', onRender);
+// function onRender () {
+//     if (map.loaded()) {
+//         const time = performance.now() - window._start;
+//         console.timeEnd('load map');
+//         map.off('render', onRender)
+// 
+//         const params = new URLSearchParams(window.location.search.slice(1));
+//         const times = params.getAll('time') 
+//         if (times.length >= 10) {
+//             console.log(times.map(Number));
+//         } else {
+//             params.append('time', time)
+//             window.location.search = '?' + params.toString()
+//         }
+//     }
+// }
 
 </script>
 </body>

diff --git a/main.js b/main.js
@@ -0,0 +1,6 @@
+import './rollup/chunk1';
+import './rollup/worker';
+import './rollup/index';
+
+
+export default mapboxgl;
diff --git a/package.json b/package.json
@@ -95,14 +95,14 @@
     "remark-html": "^5.0.1",
     "remark-react": "^4.0.1",
     "request": "^2.79.0",
-    "rollup": "^0.56.1",
+    "rollup": "^0.56.2",
     "rollup-plugin-browserify-transform": "^1.0.1",
     "rollup-plugin-buble": "^0.18.0",
     "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-flow": "^1.1.1",
     "rollup-plugin-node-resolve": "3.0.0",
     "rollup-plugin-uglify": "^3.0.0",
-    "rollup-plugin-unassert": "^0.1.0",
+    "rollup-plugin-unassert": "git+ssh://git@gitlab.com/anandthakker/rollup-plugin-unassert.git#034be84648eb2e144c130ef491e777fee07305c3",
     "sinon": "^2.1.0",
     "slugg": "^1.2.1",
     "st": "^1.2.0",

diff --git a/rollup.config.js b/rollup.config.js
@@ -9,39 +9,72 @@ import brfs from 'brfs';
 import workerPrelude from './build/rollup-plugin-worker-prelude';
 import uglify from 'rollup-plugin-uglify'
 
-const plugins = [
-    flow(),
-    json(),
-    buble({transforms: {dangerousForOf: true}, objectAssign: "Object.assign"}),
-    unassert(),
-    resolve({
-        browser: true,
-        preferBuiltins: false
-    }),
-    browserifyPlugin(brfs, {
-        include: 'src/shaders/index.js'
-    }),
-    commonjs({
-        namedExports: {
-            '@mapbox/gl-matrix': ['vec3', 'vec4', 'mat2', 'mat3', 'mat4']
-        }
-    }),
-    workerPrelude(),
-]
+const phase = process.env.PHASE || 'compile';
+let config;
 
-if (process.env.BUILD === 'production') {
-    plugins.push(uglify());
-}
+if (phase === 'compile') {
+    const plugins = [
+        flow(),
+        json(),
+        buble({transforms: {dangerousForOf: true}, objectAssign: "Object.assign"}),
+        unassert(),
+        resolve({
+            browser: true,
+            preferBuiltins: false
+        }),
+        browserifyPlugin(brfs, {
+            include: 'src/shaders/index.js'
+        }),
+        commonjs({
+            namedExports: {
+                '@mapbox/gl-matrix': ['vec3', 'vec4', 'mat2', 'mat3', 'mat4']
+            }
+        })
+    ]
+
+    if (process.env.BUILD === 'production') {
+        plugins.push(uglify());
+    }
 
-export default [
-    {
-        input: 'src/index.js',
+    config = [{
+        input: ['src/index.js', 'src/source/worker.js'],
         output: {
             name: 'mapboxgl',
-            file: 'dist/mapboxgl-rollup.js',
-            format: 'umd',
-            sourcemap: process.env.BUILD === 'production' ? true : 'inline'
+            dir: 'rollup',
+            format: 'amd',
+            sourcemap: 'inline'
         },
+        experimentalCodeSplitting: true,
         plugins
+    }];
+} else if (phase === 'bundle') {
+    config = [{
+        input: 'main.js',
+        output: {
+            name: 'mapboxgl',
+            file: 'rollup/bundle.js',
+            format: 'umd',
+            sourcemap: 'inline'
+        },
+        plugins: [],
+        intro: `
+let shared, worker, mapboxgl;
+function define(_, module) {
+    if (!shared) {
+        shared = module;
+    } else if (!worker) {
+        worker = module;
+    } else {
+        const workerBundleString = 'const sharedModule = {}; (' + shared + ')(sharedModule); (' + worker + ')(sharedModule);'
+
+        const sharedModule = {};
+        shared(sharedModule);
+        mapboxgl = module(sharedModule);
+        mapboxgl.workerBundleUrl = window.URL.createObjectURL(new Blob([bundleString], { type: 'text/javascript' }));
     }
-]
+}
+`
+    }]
+}
+
+export default config
diff --git a/src/index.js b/src/index.js
@@ -19,7 +19,6 @@ import Point from '@mapbox/point-geometry';
 import Evented from './util/evented';
 import config from './util/config';
 import {setRTLTextPlugin} from './source/rtl_text_plugin';
-import createWorker from './source/worker';
 
 const exported = {
     version,
@@ -55,9 +54,7 @@ const exported = {
 
     set accessToken(token: string) {
         config.ACCESS_TOKEN = token;
-    },
-
-    _createWorker: createWorker
+    }
 };
 
 /**

diff --git a/src/source/worker.js b/src/source/worker.js
@@ -190,6 +190,6 @@ class Worker {
     }
 }
 
-export default function createWorker(self: WorkerGlobalScopeInterface) {
-    return new Worker(self);
-};
+/* global self */
+new Worker(self);
+
diff --git a/yarn.lock b/yarn.lock
@@ -8861,9 +8861,9 @@ rollup-plugin-uglify@^3.0.0:
   dependencies:
     uglify-es "^3.3.7"
 
-rollup-plugin-unassert@^0.1.0:
+"rollup-plugin-unassert@git+ssh://git@gitlab.com/anandthakker/rollup-plugin-unassert.git#034be84648eb2e144c130ef491e777fee07305c3":
   version "0.1.0"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-unassert/-/rollup-plugin-unassert-0.1.0.tgz#49ff54f5eb521d71a50ffeed4ba71543ab7fae70"
+  resolved "git+ssh://git@gitlab.com/anandthakker/rollup-plugin-unassert.git#034be84648eb2e144c130ef491e777fee07305c3"
   dependencies:
     acorn "^4.0.4"
     convert-source-map "^1.3.0"
@@ -8886,9 +8886,9 @@ rollup-pluginutils@^2.0.1:
     estree-walker "^0.3.0"
     micromatch "^2.3.11"
 
-rollup@^0.56.1:
-  version "0.56.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.56.1.tgz#87dd6295103da48c2376872836273785ffe0def3"
+rollup@^0.56.2:
+  version "0.56.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-0.56.2.tgz#1788cf56d4350b6d8ecf76b5d654c59c7bf9c24a"
 
 run-async@^2.2.0:
   version "2.3.0"