What is the best method to load JS files?

Question

I try to work with the code in the way that gives me the greatest possible use of what was written, with this, for every feature that I will need to do in javascript/jQuery I control the individual version of each thing with git.

Controlling this individual version, it happens that I end up having many files to be imported on system loading, my upload has a list like this (well summarized):

Masker-0.0.5.js

navigation-0.0.1.js

Validator-0.2.1.js

Tiles-effects-1.0.0.js

Tiles-navigation-1.0.0.js

Including external uploads, and internal third-party uploads, the list is really giant, because only the features related to Bootstrap CSS already give ~30 file-only inclusions. js, not to mention the style sheets.

Going back to my individual files, they are relatively small, averaging 3k of characters.

My current upload in development environment is done with a PHP class:

    class local__jsPackages
    {

        public static function get_packages()
        {
            $files = '';
            $packages = self::packages();
            foreach ($packages as $import)
            {
                $path = $import['path'];
                $file = $import['file'];
                $version = $import['version'];
                $files .= '<script src="' . $path . '/' . $file . '' . $version . '.js"></script>';
            }
            return $files;
        }

    private static function packages()
        {

            $packages = [
                //Plugin Bootstrap
                '0' => [
                    'path' => '../theme/admin/assets/global/plugins/bootstrap/js',
                    'file' => 'bootstrap',
                    'version' => (string) '.min'
                ]
                //Dentro da array seguem todas as inclusões locais
           ];
           return $packages;
     }
}

And when it’s passed to production, I manually group everything into a single giant file, that’s the part of the problem process.

What is the best way to LOAD many javascript files/methods/plugins ?

PS: They should be loaded all at once, as the application should not allow the user to update the page without scrolling.

Answer 1

Anthraxisbr, I will leave here my suggestion here as an answer to get better to read, the comments is very limited

Grunt makes use of JS and CSS files in addition to automatically minifying them.

For example:

In my wife’s blog, I use Grunt to concatenate and minify 3 files

'js/jquery.js',
'js/what-input.js',
'js/app.js'

So the uglfy of my Gruntfile.js is like this:

uglify: {
        dist: {
            options: {
                expand: true,
            },
        files: {
                'js/app.min.js': [
                    'js/jquery.js',
                    'js/what-input.js',
                     'js/app.js'
                ],
                }
            },
        },

Soon, the 3 files will be concatenated and minified in a single file: app.min.js.

but if I want to run it without knowing the file name?

Very easy, inside your files: {} would look like this:

'js/app.min.js': [
    'js/*.js //vai pegar tudo que tem extensão .JS
 ],

And if I don’t want to run a single file?

Just add an exclamation in front of the file path so:

'js/app.min.js': [
   '!js/nomearquivo.js // vai ignorar esse cara na concatenação e minificação
],

I usually create a PHP function to control the version

function get_file_version(){
 echo '20170801';
}

and finally, I call the html file as follows:

<script src="js/app.min.js?version=<?php get_file_version(); ?>"></script>

Because?

Because the browser caches the file and every time the file is modified. JS is necessary for the browser to re-read the file for the changes to take effect. Every time Voce changes the value, Voce forces the browser to read the file.

https://gruntjs.com/getting-started

I hope I’ve helped