# Importing WebGL-only or WebGPU-only

**URL:** <https://forum.babylonjs.com/t/importing-webgl-only-or-webgpu-only/60435>\
**Category:** Feature requests\
**Tags:** import, webpack, size\
**Created:** [September 10, 2025, 3:21am UTC](https://forum.babylonjs.com/t/importing-webgl-only-or-webgpu-only/60435 "2025-09-10T03:21:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kzhsw](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kzhsw](https://forum.babylonjs.com/u/kzhsw)\
**Post date:** [September 10, 2025, 3:21am UTC](https://forum.babylonjs.com/t/importing-webgl-only-or-webgpu-only/60435/1 "2025-09-10T03:21:53Z")

</div>

## Background

As recent development babylon.js is making dual-version shaders, one for WebGL, and one for WebGPU. But the shaders are imported via side effect and can not be tree-shaked by bundlers, that makes final packaged size grow in recent versions.

Here is a graph from [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) that shows both Shaders and ShadersWGSL are kept in the final package, and takes considerable size.

 ![graph of webpack-bundle-analyzer](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/7/e7e59d257051f7749c6c3ee7d364e7f6d2a2edae.png)

## Proposal

Add WebGL-only and WebGPU-only variants for each index.ts file, taking `Meshes/index.ts` for example:

> <https://github.com/BabylonJS/Babylon.js/blob/447517cdb1e15b7141e5a49a5be070c7ee4755d3/packages/dev/core/src/Meshes/index.ts#L47>

A `Meshes/index-webgl.ts` contains only import/exports from `Shaders`, and a `Meshes/index-webgpu.ts` contains only import/exports from `ShadersWGSL`.  
Also, when importing from other `index` file, like `export * from "./fluidRenderer/index";` would be `export * from "./fluidRenderer/index-webgl";` or `export * from "./fluidRenderer/index-webgpu";`

## Alternative

- Do not import from any `index` file, and manually import only files needed, which could be a major overhead to downstream devs.
- Compile shaders to space-efficient compressed bytecode format and recover at runtime, which could make loading slower.
- Configure bundlers to ignore shader imports globally

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [September 10, 2025, 4:32pm UTC](https://forum.babylonjs.com/t/importing-webgl-only-or-webgpu-only/60435/2 "2025-09-10T16:32:57Z")

</div>

> [@kzhsw](#):
>
> Do not import from any `index` file, and manually import only files needed, which could be a major overhead to downstream devs.

This is the current recommendation and @ryantrem / @RaananW have a plan for easier management.

---

<div class="post-metadata">

**Author:** ![kzhsw](https://avatars.discourse-cdn.com/v4/letter/k/848f3c/32.png) [@kzhsw](https://forum.babylonjs.com/u/kzhsw)\
**Post date:** [October 10, 2025, 6:40am UTC](https://forum.babylonjs.com/t/importing-webgl-only-or-webgpu-only/60435/3 "2025-10-10T06:40:36Z")

</div>

If anyone interested, here is a webpack-based config that excludes part of the shaders with [`externals`](https://v4.webpack.js.org/configuration/externals/)

webpack.config.js

```js

const excludeBabylonjs = [
  /node_modules[\\/]@babylonjs[\\/]core[\\/]ShadersWGSL/, // Exclude WebGPU Shaders
  // /node_modules[\\/]@babylonjs[\\/]core[\\/]Shaders/, // Exclude WebGL Shaders
  // Add more here
];
module.exports = {
    externals: function (context, request, callback) {
      const absPath = path.join(context, request);
      const relPath = path.relative(__dirname, absPath);
      for (let i = 0, length = excludeBabylonjs.length; i < length; i++) {
        if (excludeBabylonjs[i].test(relPath)) {
          callback(null, {
            root: 'Object', // It should be safe since shader imports are side-effects only
          });
          return;
        }
      }
      callback();
    }
};

```

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [February 23, 2026, 1:16pm UTC](https://forum.babylonjs.com/t/importing-webgl-only-or-webgpu-only/60435/4 "2026-02-23T13:16:20Z")

</div>

Just wanted to add that it is documented here as well - [Babylon.js docs](https://doc.babylonjs.com/setup/support/chunksFun/#ignoring-certain-files)