What is the best method of loading JS files? [closed]

Question

What is the best method of loading JS files? [closed]

Navigation

#1 by (1 votes)

1

I'm trying to work with the form code that gives me the greatest possible use of what was written, so for every feature I'll need to do in javascript / jQuery I control the individual version of every thing with git. / p>

Controlling this individual version, I happen to end up having a lot of files to import into the system load, 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, third-party and inbound uploads, the list becomes really big, as only Bootstrap CSS-related features give ~ 30 additions to .js files only, not to mention style sheets.

Returning to my individual files, they are relatively small, averaging 3k characters.

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

    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 problem part of the process.

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

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

php javascript desempenho html5 css

asked by anonymous 04.08.2017 / 18:54

1 answer

Return one of the functions in jquery. How to get Gallery Uri on Android 7 nougat

score 1 · Accepted Answer

AnthraxisBR, I will leave here my suggestion here as an answer to get better to read, comments are very limited

Grunt concatenates JS and CSS files in addition to automatically minifying them.

For example:

On 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 looks like this:

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

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

But if I want to run this 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
 ],

What if I do not want to run a single file?

Just add an exclamation in front of the path file like this:

'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 to finish, I call the file in html as follows:

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

Why?

Because the browser caches the file and every time the .JS file is modified, the browser must reread the file for the changes to take effect. Every time you change the value, you force the browser to read the file.

link

I hope I have helped