Bundling & Tree Shaking

Copy Page

Tree Shaking

Tree shaking removes unused JavaScript code from your final bundle. The example below shows a minimal LyteNyte Grid setup. Although the useServerDataSource hook is imported, the component never uses it. Modern bundlers detect unused imports and exclude their code from the bundle.

import {
  useServerDataSource, // Not used
  useClientRowDataSource,
  Grid
} from "@1771technologies/lytenyte-pro"

export function TreeShakingExample() {
  const ds = useClientRowDataSource({ ... });

  const grid = Grid.useLyteNyte({ ... })

  return <Grid.Root>{...}</Grid.Root>
}

For a bundler to tree shake correctly, your code must meet several criteria. It must be statically analyzable, meaning the bundler can determine the structure of imports at compile time. The code must also be side-effect free. Importing a module should not execute hidden logic. Finally, modules must be structured so that unused pieces can be removed without affecting other parts of the code.

LyteNyte Grid fulfills all of these criteria. Tree shaking occurs automatically in bundlers like Next.js and Vite, and LyteNyte Grid is designed to work seamlessly with them.

Choosing a Bundler

The LyteNyte Grid package ships as a set of ESM modules. Modern browsers can load ESM files directly, but bundling your modules into a single file, or a small set of files, remains best practice for performance and caching. You need a bundler to produce these optimized outputs.

LyteNyte Grid works with any standards-compliant bundler. Popular options include:

• Vite
• Rollup
• Rspack

Bundling Best Practices

Follow these guidelines to ensure optimal bundling when using LyteNyte Grid:

1. Use ES Modules: Favor ES module syntax (import and export) instead of CommonJS (require).

2. Enable Tree Shaking: Verify that tree shaking is enabled in your bundler configuration

3. Avoid Side Effects: Ensure your code doesn't introduce side effects that could prevent tree shaking, such as modifying imported modules or using imported functions in ways that can't be statically analyzed

4. Use Specific Imports: Avoid import * as All from "<package-name>" syntax as these wildcard imports can prevent most bundlers from effectively tree shaking

By applying these guidelines and leveraging LyteNyte Grid's architecture, you can build efficient applications with minimal bundle size.

If you use a modern framework like Next.js, Remix, or Vite, these optimizations work automatically. Add LyteNyte Grid as a dependency and begin using the grid without additional configuration.

Next Steps

• Security: Learn how LyteNyte Grid handles code security and protects applications from common exploits.
• Supported Browsers: Review which browsers LyteNyte Grid supports.
• Grid Versioning: Learn the best way to include LyteNyte Grid in your bundle.