AlexanderKim's avatar

Is it a good practice to combine all js files

I have a dilemma now, should we combine all js file in to a single one? Even 3rd party libraries, like owl carousel, etc?

For example: we have a file resources/js/app.js:

require('./bootstrap');
require('owl.carousel');
require('sweetalert2l');
require('./custom.js');

Should we combine all 3rd party libs in a single app.js? Also, i've noticed incompatibility issues, when combining some 3rd party libraries in to a single one, e.g.: https://github.com/whooehoo/ymaps-touch-scroll

If i combine it - then it doesn't work, but if i use it in a separate file - it works...

0 likes
8 replies
Cronix's avatar

I compile all vendor libraries, like jquery/bootstrap/owl carousel, sweetalert) into a single vendor.js file, and another file for my app code. Then use laravel mix's version() function so they get cached by the browser. Vendor rarely changes so it gets cached for a longer time.

1 like
Cronix's avatar

If i combine it - then it doesn't work, but if i use it in a separate file - it works...

I've had that happen as well on a few vendor libraries. Check the library code to make sure there is an ending ; on the files giving the problems.

Cronix's avatar

Try the one from /src, not /dist. /dist is already compiled for webpack.

click's avatar

Also minifying already minified code will give sometimes funky bugs. Always try to use the unminified source code and minify it yourself.

AlexanderKim's avatar

@cronix, how can i include /src with require('ymaps-touch-scroll') ? It includes automatically i think.

Cronix's avatar

I usually have something like this in my webpack.mix.js file

.combine([
        'resources/assets/vendor/jquery-ui-1.12.1.custom/jquery-ui.js',
        'resources/assets/vendor/jquery-color.v2.1.2/jquery-color.js',
        'node_modules/jquery-match-height/dist/jquery.matchHeight.js',
        'node_modules/jquery.maskedinput/src/jquery.maskedinput.js',
        'node_modules/jquery.scrollto/jquery.scrollTo.js',
        'node_modules/print-this/printThis.js',
        'node_modules/eonasdan-bootstrap-datetimepicker/src/js/bootstrap-datetimepicker.js'
    ], 'public/js/vendor.js')
1 like
AlexanderKim's avatar

Also what's the difference between .js and .combine, you can merge your scripts using .js method as well.

So it's not possible to choose /src dir with require() in app.js?

Please or to participate in this conversation.