What would you recommend for dynamically loading JS and CSS module files?

Question

css

I wanted to use yepnope, but... https://github.com/SlexAxton/yepnope.js#deprecatio...
Started tinkering with RequireJS, but there's trouble... requirejs.org/docs/faq-advanced.html#css
What do you advise?

Answer 1

Look towards stealjs in the javascriptmvc package . Works very fast and groups files pretty cool. In most situations, even when several dependencies need to be loaded, they will be loaded as 1 file. In general, try it, everything is very cool there.

Answer 2

I advise you to abandon the idea of ​​dynamic css loading.
In general, all these amd / commonjs were not invented for dynamic loading of modules, but for dividing the project and explicitly specifying dependencies. Just convenient at the time of development. Although then it's better to use ES6 + compilation to ES5.

Answer 3

For JS - RequireJS
For CSS similar code in index.html:

<script>
function createLink(src){
                var link = document.createElement("link");
                link.type = "text/css";
                link.rel = "stylesheet";
                link.href = src + '?v=' + SYSTEM.cssVersion;
                document.querySelector("head").appendChild(link);
            }

            createLink('css/main.css');
            createLink('vendor/select2/dist/css/select2.css');
</script>

The bottom line is: you insert into the HTML itself with the CSS necessary to render the first page, the rest of the CSS will start loading only after the page is completely rendered - without rendering blocking.