-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
inline rollup plugin 'shaderChunks' not contributing as much as it could #5601
Comments
Wow, yeah, we should address this. Hopefully this will shave a few KB off the build size. |
This is a robust implementation that may suite. This adds:
import { createFilter } from '@rollup/pluginutils';
/**
* @type {readonly RegExp[]}
*/
const DEFAULT_SHADERS = Object.freeze(['**/*.js']);
/**
* @param {PluginOptions} options Plugin config object
* @returns {Plugin} The plugin that converts shader code.
*/
export function shaderChunks({
include = DEFAULT_SHADERS,
exclude = undefined,
enabled = true
} = {}) {
const filter = createFilter(include, exclude);
return {
transform(source, shader) {
if (!enabled || !filter(shader)) return;
source = source.replace(/\/\* *glsl *\*\/\s*`(.*?)`/gs, function (match, glsl) {
return JSON.stringify(
glsl
.trim() // trim whitespace
.replace(/\r/g, '') // Remove carriage returns
.replace(/ {4}/g, '\t') // 4 spaces to tabs
.replace(/[ \t]*\/\/.*\n/g, '') // remove single line comments
.replace(/[ \t]*\/\*[\s\S]*?\*\//g, '') // remove multi line comments
.concat('\n') // ensure final new line
.replace(/\n{2,}/g, '\n') // condense 2 or more empty lines to 1
);
});
return {
code: source,
map: null
};
}
};
} I'll finish testings and post results on build size. I'm hoping for a kb or two. |
Here are the results. It's a modest 10 to 30 KB.
|
Nice - modest, but still well worth having. 👏 |
The only think I'm wondering is whether that filter will slow down the build process since it now has to run that regex in the entire codebase. |
I'll build a chart. It's milliseconds. |
Important: shaders processing code requires a final new line for each chunk. |
As far as impacting build times, its small. There are far bigger culprits. Other tools build this project in 1/10th the time. This is the average of 5 runs over two different types of machines. Just focusing on
|
For future reference, plugin performance and other build timings can be displayed by adding For the most processed file,
Interesting that this plugin consumes 16ms of build time. |
The rollup plugin,
shaderChunks
, is defined inline withinrollup.config.js
.It is not contributing as much as it could to the build process. This could result in a small amount of bloat in build products.
Current limitations.
It filters files to
'**/*.vert.js',
and'**/*.frag.js'
. The repository does not have any files that currently match this and the 'glsl' files it could match are defined as '.js'. Effectively this disables the plugin.It will only process one
/* glsl */
template literal per file if it was used. The matching regular expression is looking for the longest match. This creates a unique errors where javascript between the first and second/* glsl */
template literal in a single file would get added to the shader code of the first, and the second template literal would come out as "undefined" in the build tools.If developers add an extra space or line between the inline language keyword comment 'glsl' things stop working. If there is an extra space or line separator between the inline language keyword comment and the template literal, things stop working. Most tools allow a degree of flexibility here.
Resolution
I propose changing the regular expression to the following and adjusting the filter to allow this plugin to contribute to the build process.
/\/\* *glsl *\*\/\s*\`(.*?)\`/gs
The filter would be simplified to the following so it "just works":
`'**/*.js'`
This will provide slightly more forgiving syntax in source code, which matches the tools used for syntax highlighting and editing.
It will also allow developers to define (and work with) tightly bound fragment and vertex shaders in the same file. Each one will be optimised and treeshakeable. This might be a graceful interaction model in tools like editors.
The pair would be imported under a common namespace and used as follows.
The text was updated successfully, but these errors were encountered: