Minify js code in rx.script tags

[macmoritz]

Yes, js code is not the best solution, but for some frontend related time critical topics it is great to use. A possible improvement is to minify the js code. Tbh it would not make a huge difference, but perfomance is a key feature of this project.

[Alek99]

For production build the code should be minified are you talking about in dev mode?

[macmoritz]

I am talking about the code written in the rx.script component. It is not minified as I can see in the production code.

[macmoritz]

    return rx.fragment(
        rx.chakra.color_mode_button(rx.chakra.color_mode_icon(), float="right"),
        rx.script("""
        console.log("Hello, Reflex!");
        function myFunction() {
            console.log("Hello again"):
        }"""),
    )

This rx.script gets rendered as

<script data-nscript="afterInteractive">
        console.log("Hello, Reflex!");
        function myFunction() {
            console.log("Hello again"):
        }</script>

in the browser.

My idea is to minimize the inner js code. The simple way would be to remove all linebreaks and indents, are there any other optimization ideas?

Should we implement an attribute in the rx.script component like "minify"? What would be the default? Another implementation idea would be to have a rx.minimize component which triggers this behaviour (@benedikt-bartscher). What do you suggest?

[picklelo]

@macmoritz If we wanted to do this I think there are probably some JS minified libraries we could just use instead of reimplementing it. A real minified will do things such as rename the variables, etc.

I'm thinking this won't provide much gain - if you had a big script, you could always just put it in your. assets/ directory and import it.