This article contains additional information on options for how to build deck.gl.
deck.gl and luma.gl provide a lot of functionality and the amount of code these libraries contain will of course impact the size of your application bundle and your startup load time.
There are multiple techniques used in JavaScript.
When installed from npm, deck.gl and related libraries come with two separate distributions.
Directory | mainField | Description |
---|---|---|
dist/es5 | main | All code is transpiled to be compatible with the most commonly adopted evergreen browsers (see below). Exports/imports are transpiled into commonjs requires. The main reason to use this distribution is under Node.js (e.g. unit tests), or if your bundler does not support tree-shaking using import /export . |
dist/esm | module | Same as dist/es5 , except export and import statements are left untranspiled to enable tree shaking. |
You will have to check the documentation of your particular bundler to see what configuration options are available. Webpack picks module
main field over main
if it is available. You can also explicitly choose one distribution by specifying a resolve.mainFields
array.
The transpilation target is set to >0.2%, maintained node versions, not ie 11, not dead, not chrome 49
resolved by browserslist. To support older or less common browsers, you may use @babel/preset-ev
in your babel settings and include node_modules
.
deck.gl was designed from the start to leverage tree-shaking. This technique has been talked about for quite some time but has been slow in actually providing the expected benefits. With the combination of webpack 4 and babel 7 we are finally starting to see significant results, so you may want to experiment with upgrading your bundler if you are not getting results.
Note that tree-shaking still has limitations:
So, what bundle size impact should you expect? When do you know if you have set up your bundler optimally. To help answer these questions, we provide some numbers you can compare against. deck.gl has scripts that measure the size of a minified bundle after each build, which allows us to provide comparison numbers between releases.
Entry point | 8.5 Bundle (Compressed) | 8.4 Bundle (Compressed) | Comments |
---|---|---|---|
esm | 398 KB (115 KB) | 485 KB (128 KB) | Transpiled, tree-shaking enabled |
es5 | 686 KB (178 KB) | 812 KB (197 KB) | Transpiled, no tree-shaking |
Notes:
This is not the final word on deck.gl bundle size. More work is being done to reduce the size of deck.gl and we are confident that even as future releases will have more functionality, we will be able to keep the library code from growing and, more importantly, make deck.gl even more "tree shakeable", with the intention that apps should only "pay for what they use".
gzip -9
. Consider using slower brotli
compression for static assets, it typically provides an additional 20% reduction.