A very simple webpack loader that reduces size of inline glsl fragments by appropriately removing spaces, new-lines and comments. These fragments must start with a comment //glsl so that it can be easily detected1. Significant file size gain for important WebGL applications.
npm install --save-dev inline-glsl-compress-loaderor
yarn add --dev inline-glsl-compress-loaderIn your webpack config file, add the loader before other loaders:
{
loader: 'inline-glsl-compress-loader'
}for the script files that needs it. For instance, it can be .js files, .vue files, etc.:
// webpack config
// ...
module: {
rules: [
{
test: /\.vue$/,
use: [{
loader: 'vue-loader',
options: vueLoaderConfig
},
{
loader: 'inline-glsl-compress-loader'
},
]
},
// other rules
// ...
}
// ...
}This js sample code:
var vertexShader = compileShader(`//glsl
attribute vec2 position;
void main() {
// this is a comment
gl_Position = vec4(position, 0.0, 1.0);
}
`, gl.VERTEX_SHADER);will be compressed into:
var vertexShader = compileShader(`attribute vec2 position;void main() {gl_Position = vec4(position, 0.0, 1.0);}`, gl.VERTEX_SHADER);Feel free to contribute to this project
Copyright (c) 2018 François Risoud Licensed under the MIT license.
1 - I use also this comment for my syntax highlighter to detect glsl fragments.