Remove debug logging in production environment

docs/upgrade-guide.md

@@ -52,6 +52,10 @@ Users of `SimpleMeshLayer` with texture will need to flip their texture image ve
 
 The change has allowed us to support loading textures from `ImageBitmap`, in use cases such as rendering to `OffscreenCanvas` on a web worker. 
 
+##### Production Mode
+
+deck.gl now removes low-level logging when `NODE_ENV` is `production`. This helps reduce bundle size and improve runtime performance.
+
 ##### projection system
 
 - The [common space](/docs/shader-module/project.md) is no longer scaled to the current zoom level. This is part of an effort to make the geometry calculation more consistent and predictable. While one old common unit is equivalent to 1 screen pixel at the viewport center, one new common unit is equivalent to `viewport.scale` pixels at the viewport center.

modules/core/package.json

@@ -26,8 +26,9 @@
   ],
   "sideEffects": false,
   "scripts": {
+    "build-prod": "npx babel src/lib --config-file ../../babel.config.js --out-dir dist/${BABEL_ENV}/lib.prod --plugins ../../scripts/babel-plugin-remove-log",
     "build-bundle": "webpack --config ../../scripts/bundle.config.js",
-    "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
+    "prepublishOnly": "BABEL_ENV=es5 npm run build-prod && BABEL_ENV=es6 npm run build-prod && BABEL_ENV=esm npm run build-prod && npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
     "@loaders.gl/core": "^1.3.4",

modules/core/src/index.js

@@ -41,13 +41,16 @@ export {default as PostProcessEffect} from './effects/post-process-effect';
 export {default as _LayersPass} from './passes/layers-pass';
 
 // Experimental Pure JS (non-React) bindings
-export {default as Deck} from './lib/deck';
-
-export {default as LayerManager} from './lib/layer-manager';
-export {default as AttributeManager} from './lib/attribute/attribute-manager';
-export {default as Layer} from './lib/layer';
-export {default as CompositeLayer} from './lib/composite-layer';
-export {default as DeckRenderer} from './lib/deck-renderer';
+export {
+  Deck,
+  DeckRenderer,
+  Effect,
+  LayerManager,
+  AttributeManager,
+  Layer,
+  CompositeLayer,
+  LayerExtension
+} from './lib-exports';
 
 // Viewports
 export {default as Viewport} from './viewports/viewport';
@@ -79,9 +82,6 @@ export {default as OrthographicController} from './controllers/orthographic-cont
 
 // EXPERIMENTAL EXPORTS
 
-// Experimental Effects (non-React) bindings
-export {default as Effect} from './lib/effect';
-
 // Eperimental Transitions
 export {TRANSITION_EVENTS} from './controllers/transition-manager';
 export {default as LinearInterpolator} from './transitions/linear-interpolator';
@@ -98,8 +98,6 @@ import {count} from './utils/count';
 import memoize from './utils/memoize';
 export {mergeShaders} from './utils/shader';
 
-export {LayerExtension} from './lib/layer-extension';
-
 // props
 import {compareProps} from './lifecycle/props';
 

modules/core/src/lib-exports.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./lib.prod');
+} else {
+  module.exports = require('./lib');
+}

modules/core/src/lib.prod/index.js

@@ -0,0 +1,2 @@
+// This file is overwritten before publish
+export * from '../lib';

modules/core/src/lib/deck-renderer.js

@@ -134,15 +134,12 @@ export default class DeckRenderer {
     const primitiveCount = totalCount - compositeCount;
     const hiddenCount = primitiveCount - visibleCount;
 
-    let message = '';
-    message += `RENDER #${this.renderCount} \
-${visibleCount} (of ${totalCount} layers) to ${pass} because ${redrawReason} `;
-    if (log.priority > LOG_PRIORITY_DRAW) {
-      message += `\
-(${hiddenCount} hidden, ${compositeCount} composite ${pickableCount} pickable)`;
-    }
-
-    log.log(LOG_PRIORITY_DRAW, message)();
+    log.log(
+      LOG_PRIORITY_DRAW,
+      `RENDER #${this.renderCount} \
+${visibleCount} (of ${totalCount} layers) to ${pass} because ${redrawReason} \
+(${hiddenCount} hidden, ${compositeCount} composite ${pickableCount} pickable)`
+    )();
 
     if (stats) {
       stats.get('Redraw Layers').add(visibleCount);

modules/core/src/lib/index.js

@@ -22,7 +22,11 @@
 export {COORDINATE_SYSTEM} from './constants';
 
 // Export core objects
+export {default as Deck} from './deck';
+export {default as DeckRenderer} from './deck-renderer';
+export {default as Effect} from './effect';
 export {default as Layer} from './layer';
 export {default as CompositeLayer} from './composite-layer';
+export {default as LayerExtension} from './layer-extension';
 export {default as AttributeManager} from './attribute/attribute-manager';
 export {default as LayerManager} from './layer-manager';

modules/core/src/lib/layer-extension.js

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 import {deepEqual} from '../utils/deep-equal';
 
-export class LayerExtension {
+export default class LayerExtension {
   constructor(opts = {}) {
     this.opts = opts;
   }

modules/core/src/lib/layer.js

@@ -680,7 +680,7 @@ export default class Layer extends Component {
     // Update primary flags
     if (flags.dataChanged && !changeFlags.dataChanged) {
       changeFlags.dataChanged = flags.dataChanged;
-      log.log(LOG_PRIORITY_UPDATE + 1, () => `dataChanged: ${flags.dataChanged} in ${this.id}`)();
+      log.log(LOG_PRIORITY_UPDATE + 1, `dataChanged: ${flags.dataChanged} in ${this.id}`)();
     }
     if (flags.updateTriggersChanged && !changeFlags.updateTriggersChanged) {
       changeFlags.updateTriggersChanged =
@@ -689,32 +689,29 @@ export default class Layer extends Component {
           : flags.updateTriggersChanged || changeFlags.updateTriggersChanged;
       log.log(
         LOG_PRIORITY_UPDATE + 1,
-        () =>
-          'updateTriggersChanged: ' +
-          `${Object.keys(flags.updateTriggersChanged).join(', ')} in ${this.id}`
+        `updateTriggersChanged: ${Object.keys(flags.updateTriggersChanged).join(', ')} in ${
+          this.id
+        }`
       )();
     }
     if (flags.propsChanged && !changeFlags.propsChanged) {
       changeFlags.propsChanged = flags.propsChanged;
-      log.log(LOG_PRIORITY_UPDATE + 1, () => `propsChanged: ${flags.propsChanged} in ${this.id}`)();
+      log.log(LOG_PRIORITY_UPDATE + 1, `propsChanged: ${flags.propsChanged} in ${this.id}`)();
     }
     if (flags.extensionsChanged && !changeFlags.extensionsChanged) {
       changeFlags.extensionsChanged = flags.extensionsChanged;
       log.log(
         LOG_PRIORITY_UPDATE + 1,
-        () => `extensionsChanged: ${flags.extensionsChanged} in ${this.id}`
+        `extensionsChanged: ${flags.extensionsChanged} in ${this.id}`
       )();
     }
     if (flags.viewportChanged && !changeFlags.viewportChanged) {
       changeFlags.viewportChanged = flags.viewportChanged;
-      log.log(
-        LOG_PRIORITY_UPDATE + 2,
-        () => `viewportChanged: ${flags.viewportChanged} in ${this.id}`
-      )();
+      log.log(LOG_PRIORITY_UPDATE + 2, `viewportChanged: ${flags.viewportChanged} in ${this.id}`)();
     }
     if (flags.stateChanged && !changeFlags.stateChanged) {
       changeFlags.stateChanged = flags.stateChanged;
-      log.log(LOG_PRIORITY_UPDATE + 1, () => `stateChanged: ${flags.stateChanged} in ${this.id}`)();
+      log.log(LOG_PRIORITY_UPDATE + 1, `stateChanged: ${flags.stateChanged} in ${this.id}`)();
     }
 
     // Update composite flags

scripts/babel-plugin-remove-log.js

@@ -0,0 +1,21 @@
+const logMethods = ['log', 'deprecated', 'info', 'group', 'groupCollapsed', 'groupEnd', 'table'];
+
+module.exports = function _(opts) {
+  return {
+    visitor: {
+      MemberExpression(path, state) {
+        const object = path.get('object');
+
+        if (object.isIdentifier({name: 'log'})) {
+          const property = path.get('property');
+          const methodName = logMethods.find(name => property.isIdentifier({name}));
+          if (methodName) {
+            // Uncomment to debug
+            // console.log(`${state.file.opts.filename}: log.${methodName} removed`);
+            path.parentPath.parentPath.remove();
+          }
+        }
+      }
+    }
+  };
+};

scripts/bundle.config.js

@@ -45,6 +45,17 @@ function getExternals(packageInfo) {
   return externals;
 }
 
+const babelOptions = {
+  presets: [['@babel/preset-env', {forceAllTransforms: true}]],
+  // all of the helpers will reference the module @babel/runtime to avoid duplication
+  // across the compiled output.
+  plugins: [
+    '@babel/transform-runtime',
+    'inline-webgl-constants',
+    ['remove-glsl-comments', {patterns: ['**/*.glsl.js']}]
+  ]
+};
+
 const config = {
   mode: 'production',
 
@@ -69,16 +80,7 @@ const config = {
         test: /\.js$/,
         loader: 'babel-loader',
         include: /src/,
-        options: {
-          presets: [['@babel/preset-env', {forceAllTransforms: true}]],
-          // all of the helpers will reference the module @babel/runtime to avoid duplication
-          // across the compiled output.
-          plugins: [
-            '@babel/transform-runtime',
-            'inline-webgl-constants',
-            ['remove-glsl-comments', {patterns: ['**/*.glsl.js']}]
-          ]
-        }
+        options: babelOptions
       }
     ]
   },
@@ -114,6 +116,8 @@ module.exports = (env = {}) => {
     config.output.filename = 'dist/dist.dev.js';
     // Disable transpilation
     config.module.rules = [];
+  } else {
+    babelOptions.plugins.push(resolve(__dirname, './babel-plugin-remove-log'));
   }
 
   // NOTE uncomment to display config