Dynamic script tags load ps synchronously: no package compilation, static implementation of static resource entry dynamic configuration, no compilation package static resources add version number...

/** 
Function: Create dynamic tags to load css and js files, the focus is on js files, use onloading and recursion to achieve synchronous loading of dynamic tags 
Usage: declare and call the following functions in the script at the bottom of the html file body, and write in the obj to be loaded Note on file information 
, because the css is loaded later, the page will have the problem of unstyled page skeleton flickering. You can add body{opacity:0} in the head tag, and change it to body{opacity:1 in the css file } 

*/

function noAsyncScriptTag() {

            var obj = {
                pubPath: "./static" , // entry configuration
                version: "v-0.0.0.1" , // version information
                js: [{
                        type: 'js',
                        filepath: '/js/jquery-3.4.1.min.js'
                    },
                    {
                        type: 'js',
                        filepath: "/laydate/laydate.js"
                    },
                    {
                        type: 'js',
                        filepath: "/js/main.js"
                    }
                ],
                css: [{
                        type: 'css',
                        filepath: "/css/jquery.mCustomScrollbar.min.css"
                    },
                    {
                        type: 'css',
                        filepath: "/font/iconfont.css"
                    },
                    {
                        type: 'css',
                        filepath: "/css/base.css"
                    }
                ]
            } 
// The statically introduced picture in the page (ps: the address after removing the resource directory is written on the data-src attribute) 
            Array.prototype.forEach.call(
                document.querySelectorAll('img'),
                function (item) {
                    item.src = obj.pubPath + item.dataset.src
                })
            //   Dynamic loading of css files//Array order determines the order of files, both css cascading relationship 
            obj.css.forEach( function (item){
                 var link = document.createElement('link' )
                    link.rel="stylesheet"
                    link.href = obj.pubPath + item.filepath + '?version=' + obj.version
                    document.querySelector('head').appendChild(link)
            })

            /**
             *
             * Dynamically load js files, because js files have dependencies, the parsing order is not guaranteed,
             * The onload event and recursion are used here to make the loading of js files synchronous, and the array order is the loading order
             *
             * Static script tags are loaded asynchronously and parsed synchronously, so they can be asynchronous
             * The dynamic script tag cannot be parsed synchronously (ps: is it really impossible?), so it is processed into synchronous loading
             *
             * * /   
            var index = 0 ;
            var len = obj.js.len
            createdScript(obj.js)
            function createdScript() {
                if (obj.js[index]) {
                    var script = document.createElement('script')
                    script.src = obj.pubPath + obj.js[index].filepath + '?version=' + obj.version
                    document.querySelector('body').appendChild(script)
                    script.onload = function (e) {
                        index++
                        createdScript()
                    }
                }
            }
        }

 shortcoming:

js resource loading becomes synchronous loading, and the performance is not as good as static javascript, as shown below:

 

Reprinted in: https://www.cnblogs.com/superjsman/p/11563453.html