https://deck.gl/assets/js/2afdc493.3ed1b271.js

1"use strict";(self.webpackChunkproject_website=self.webpackChunkproject_website||[]).push([["4312"],{36928(e,s,i){i.r(s),i.d(s,{metadata:()=>n,default:()=>h,frontMatter:()=>r,contentTitle:()=>l,toc:()=>c,assets:()=>o});var n=JSON.parse('{"id":"developer-guide/building-apps","title":"Building Apps","description":"This article discusses considerations in building and deploying applications that contain deck.gl.","source":"@site/../docs/developer-guide/building-apps.md","sourceDirName":"developer-guide","slug":"/developer-guide/building-apps","permalink":"/docs/developer-guide/building-apps","draft":false,"unlisted":false,"editUrl":"https://github.com/visgl/deck.gl/tree/master/website/../docs/developer-guide/building-apps.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Tips and Tricks","permalink":"/docs/developer-guide/tips-and-tricks"},"next":{"title":"Debugging","permalink":"/docs/developer-guide/debugging"}}'),d=i(74848),t=i(28453);let r={},l="Building Apps",o={},c=[{value:"Package Format",id:"package-format",level:2},{value:"Known issues",id:"known-issues",level:3},{value:"Bundle Size",id:"bundle-size",level:2}];function a(e){let s={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",header:"header",li:"li",p:"p",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...(0,t.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(s.header,{children:(0,d.jsx)(s.h1,{id:"building-apps",children:"Building Apps"})}),"\n",(0,d.jsx)(s.p,{children:"This article discusses considerations in building and deploying applications that contain deck.gl."}),"\n",(0,d.jsx)(s.h2,{id:"package-format",children:"Package Format"}),"\n",(0,d.jsxs)(s.p,{children:["Starting from v9.0, deck.gl is fully ",(0,d.jsx)(s.a,{href:"https://nodejs.org/api/packages.html",children:"ES module"})," compliant with support for both ESM-style ",(0,d.jsx)(s.code,{children:"import"})," and CommonJS-style ",(0,d.jsx)(s.code,{children:"require()"}),"."]}),"\n",(0,d.jsx)(s.p,{children:"When installed from npm, each submodule provides the following entry points:"}),"\n",(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{children:"Entry"}),(0,d.jsx)(s.th,{children:"Type"}),(0,d.jsx)(s.th,{children:"Description"})]})}),(0,d.jsxs)(s.tbody,{children:[(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"dist/index.js"})}),(0,d.jsx)(s.td,{children:"ESM (import)"}),(0,d.jsx)(s.td,{children:"Code is only lightly transpiled to target ES2020. Tree-shakable."})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"dist/index.cjs"})}),(0,d.jsx)(s.td,{children:"CommonJS (require)"}),(0,d.jsx)(s.td,{children:"Code is bundled without dependencies, and transpiled to target Node16. Not tree-shakable."})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"dist.min.js"})}),(0,d.jsx)(s.td,{children:"UMD (script tag)"}),(0,d.jsxs)(s.td,{children:["Code is bundled with dependencies, and transpiled to target ",(0,d.jsx)(s.code,{children:"['chrome110', 'firefox110', 'safari15']"})," then minified."]})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:(0,d.jsx)(s.code,{children:"dist/dist.dev.js"})}),(0,d.jsx)(s.td,{children:"UMD (script tag)"}),(0,d.jsx)(s.td,{children:"Same as above, but not minified."})]})]})]}),"\n",(0,d.jsx)(s.p,{children:"Although the packages are designed to work with the widest range of use cases, it's going to be much easier if you work with an up-to-date development framework."}),"\n",(0,d.jsx)(s.h3,{id:"known-issues",children:"Known issues"}),"\n",(0,d.jsxs)(s.ul,{children:["\n",(0,d.jsxs)(s.li,{children:["Some older bundlers may not support the latest syntax featuers (e.g. Webpack 4 does not recognize optional chaining). You need to use a Babel plugin  and tell it to include ",(0,d.jsx)(s.code,{children:"node_modules"})," with ",(0,d.jsx)(s.code,{children:"@babel/preset-ev"}),"."]}),"\n",(0,d.jsxs)(s.li,{children:["Frameworks such as ",(0,d.jsx)(s.code,{children:"Next.js"})," and ",(0,d.jsx)(s.code,{children:"Gatsby"})," leverage Server Side Rendering to improve page loading performance. For projects that do not use ",(0,d.jsx)(s.code,{children:'type: "module"'})," in their package.json, SSR may fail with an error message ",(0,d.jsx)(s.code,{children:"Error: require() of ES Module 'xxx'"}),". This is because some of deck.gl's upstream dependencies, such as ",(0,d.jsx)(s.code,{children:"d3"}),", have opted to become ESM-only and no longer support ",(0,d.jsx)(s.code,{children:"require()"}),". See ",(0,d.jsx)(s.a,{href:"https://github.com/visgl/deck.gl/issues/7735",children:"possible solutions"}),"."]}),"\n",(0,d.jsxs)(s.li,{children:["Although enormous efforts have been put into convert

1ing the deck.gl and its upstream libraries' code base into TypeScript, some part of the legacy code paths may not meet strict type requirements, such as ",(0,d.jsx)(s.code,{children:"noImplicitAny"})," and ",(0,d.jsx)(s.code,{children:"strictNullChecks"}),". You may need to set ",(0,d.jsx)(s.code,{children:"skipLibCheck: true"})," in your project's ",(0,d.jsx)(s.code,{children:"tsconfig"})," to unblock compilation."]}),"\n"]}),"\n",(0,d.jsx)(s.h2,{id:"bundle-size",children:"Bundle Size"}),"\n",(0,d.jsx)(s.p,{children:"deck.gl provides a lot of functionality and the amount of code these libraries contain will unsurprisingly impact the size of your application bundle and your startup load time."}),"\n",(0,d.jsx)(s.p,{children:"deck.gl is designed from the ground up to be highly extensible. Visualization types are supported by different layers; additional layer features can be added by layer extensions; more data formats can be supported by loaders.gl submodules. The core is fairly lean, and each functionality is self-contained, so that applications do not have to bundle things that they don't need. Because modern build tools support tree shaking, most new features added do not have a visible size impact on existing applications."}),"\n",(0,d.jsxs)(s.p,{children:["Starting with v9.4, applications that only target WebGL2 can further reduce bundle size by configuring their bundler to resolve the custom ",(0,d.jsxs)(s.a,{href:"https://nodejs.org/api/packages.html#conditional-exports",children:[(0,d.jsx)(s.code,{children:"package.json"})," export condition"]})," ",(0,d.jsx)(s.code,{children:"visgl:webgl-only"}),". Packages that contain WebGPU implementations, including ",(0,d.jsx)(s.code,{children:"@deck.gl/core"}),", ",(0,d.jsx)(s.code,{children:"@deck.gl/layers"}),", and the ",(0,d.jsx)(s.code,{children:"@deck.gl/*-layers"})," packages, then resolve to builds with WebGPU branches and WGSL shader sources removed while preserving their normal public API and tree-shaking behavior. The default export remains WebGPU-enabled, so applications that use WebGPU should not enable this condition. Refer to your build tool's documentation for adding custom conditions: ",(0,d.jsxs)(s.a,{href:"https://esbuild.github.io/api/#conditions",children:["esbuild ",(0,d.jsx)(s.code,{children:"conditions"})]}),", ",(0,d.jsxs)(s.a,{href:"https://vite.dev/config/shared-options.html#resolve-conditions",children:["Vite ",(0,d.jsx)(s.code,{children:"resolve.conditions"})]})," (also available in ",(0,d.jsx)(s.a,{href:"https://vitest.dev/config/",children:"Vitest through Vite configuration"}),"), ",(0,d.jsxs)(s.a,{href:"https://github.com/rollup/plugins/tree/master/packages/node-resolve#exportconditions",children:["Rollup ",(0,d.jsx)(s.code,{children:"exportConditions"})]}),", ",(0,d.jsxs)(s.a,{href:"https://webpack.js.org/configuration/resolve/#resolveconditionnames",children:["webpack ",(0,d.jsx)(s.code,{children:"resolve.conditionNames"})]}),", or ",(0,d.jsxs)(s.a,{href:"https://rspack.dev/config/resolve.html#resolveconditionnames",children:["Rspack ",(0,d.jsx)(s.code,{children:"resolve.conditionNames"})]}),"."]}),"\n",(0,d.jsx)(s.p,{children:"deck.gl maintainers are conscious about how design decisions and code changes impact bundle size. The test harness has a script that evaluates the size of a minified bundle after each build. The following numbers are offered for your reference."}),"\n",(0,d.jsxs)(s.table,{children:[(0,d.jsx)(s.thead,{children:(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.th,{children:"Imports"}),(0,d.jsx)(s.th,{children:"Bundle size"}),(0,d.jsx)(s.th,{children:"Compressed"}),(0,d.jsx)(s.th,{children:"Bundle size (WebGL only)"}),(0,d.jsx)(s.th,{children:"Compressed (WebGL only)"}),(0,d.jsx)(s.th,{children:"Comments"})]})}),(0,d.jsxs)(s.tbody,{children:[(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:"Deck + Layer"}),(0,d.jsx)(s.td,{children:"504.9 kb"}),(0,d.jsx)(s.td,{children:"146.8 kb"}),(0,d.jsx)(s.td,{children:"493.6 kb"}),(0,d.jsx)(s.td,{children:"144.5 kb"}),(0,d.jsx)(s.td,{children:"Minimal core; baseline"})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:"DeckGL (React)"}),(0,d.jsx)(s.td,{children:"13.6 kb"}),(0,d.jsx)(s.td,{children:"5.2 kb"}),(0,d.jsx)(s.td,{children:"13.6 kb"}),(0,d.jsx)(s.td,{children:"5.2 kb"}),(0,d.jsx)(s.td,{})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:"HexagonLayer"}),(0,d.jsx)(s.td,{children:"50.9 kb"}),(0,d.jsx)(s.td,{children:"14.4 kb"}),(0,d.jsx)(s.td,{children:"40.2 kb"}),(0,d.jsx)(s.td,{children:"12.5 kb"}),(0,d.jsx)(s.td,{})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:"GeoJsonLayer"}),(0,d.jsx)(s.td,{children:"167.4 kb"}),(0,d.jsx)(s.td,{children:"46.9 kb"}),(0,d.jsx)(s.td,{children:"129.6 kb"}),(0,d.jsx)(s.td,{children:"39.5 kb"}),(0,d.jsxs)(s.td,{children:["Includes the most commonly used primitive layers:",(0,d.jsx)("br",{})," ScatterplotLayer, IconLayer, TextLayer, PathLayer, PolygonLayer"]})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:"MVTLayer"}),(0,d.jsx)(s.td,{children:"283.4 kb"}),(0,d.jsx)(s.td,{children:"82.1 kb"}),(0,d.jsx)(s.td,{children:"245.6 kb"}),(0,d.jsx)(s.td,{children:"74.6 kb"}),(0,d.jsx)(s.td,{children:"GeoJsonLayer + TileLayer + MVT loader"})]}),(0,d.jsxs)(s.tr,{children:[(0,d.jsx)(s.td,{children:"Tile3DLayer"}),(0,d.jsx)(s.td,{children:"355.4 kb"}),(0,d.jsx)(s.td,{children:"106.1 kb"}),(0,d.jsx)(s.td,{children:"343.9 kb"}),(0,d.jsx)(s.td,{children:"103.7 kb"}),(0,d.jsx)(s.td,{children:"ScenegraphLayer + SimpleMeshLayer + GLTF loader + 3D tiles loader"})]})]})]}),"\n",(0,d.jsxs)(s.ul,{children:["\n",(0,d.jsx)(s.li,{children:"Numbers measured using v9.4.0-alpha.2."}),"\n",(0,d.jsxs)(s.li,{children:["Each row is an independent bundle that exposes only the listed class or classes. Rows after the first externalize ",(0,d.jsx)(s.code,{children:"@deck.gl/core"})," and its direct ",(0,d.jsx)(s.code,{children:"@luma.gl/*"})," dependencies to show their incremental impact on an application that already includes the core bundle."]}),"\n",(0,d.jsxs)(s.li,{children:["Bundled and minified by esbuild targeting evergreen browsers using ",(0,d.jsx)(s.code,{children:"--tsconfig=test/size/tsconfig.json"}),". The WebGL-only columns additionally use ",(0,d.jsx)(s.code,{children:"--conditions=visgl:webgl-only"}),"."]}),"\n",(0,d.jsxs)(s.li,{children:["Compressed bundle sizes are calculated using ",(0,d.jsx)(s.code,{children:"gzip -9"}),". Consider using slower ",(0,d.jsx)(s.code,{children:"brotli"})," compression for static assets, it typically provides an additional 20% reduction."]}),"\n"]})]})}function h(e={}){let{wrapper:s}={...(0,t.R)(),...e.components};return s?(0,d.jsx)(s,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},28453(e,s,i){i.d(s,{R:()=>r,x:()=>l});var n=i(96540);let d={},t=n.createContext(d);function r(e){let s=n.useContext(t);return n.useMemo(function(){return"function"==typeof e?e(s):{...s,...e}},[s,e])}function l(e){let s;return s=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:r(e.components),n.createElement(t.Provider,{value:s},e.children)}}}]);
2//# sourceMappingURL=2afdc493.3ed1b271.js.map