three-minify-shaderchunk

Remove unnecessary three.js shader imports and reduce bundle sizes

Installation

npm install --save-dev three-minify-shaderchunk

Usage

Webpack

This example uses the string-replace-loader webpack plugin

// Webpack config
const transformShaderChunk = require('three-minify-shaderchunk');
const shadersToInclude = require('three-minify-shaderchunk/examples/all_shaders');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /ShaderChunk.js$/,
        loader: 'string-replace-loader',
        include: path.resolve('./node_modules/three/src/renderers/shaders'),
        options: {
          search: /[\s\S]*/,
          replace: transformShaderChunk(shadersToInclude),
          strict: true,
        },
      },
    ],
  },
};

transformShaderChunk returns a string with the new ShaderChunk file contents, so it can be used in any other build tool with a similar replacement plugin.

Note, this package can only be used to remove unused shaders from bundles, and does not currently do any glsl minification. You can use three-minify-shaderchunk together with other plugins like three-minifier that do glsl minification to further reduce bundle sizes.

If you're looking to go even further, you can take advantage of aliasing imports from 'three' to module sources.

License

MIT License