Level 7
Hey ,
Laravel mix has the ability to merge all your js files into a single app.js file. you just have to direct it to the individual files.
Hopefully that helps I am also learning.
Jul 8, 2018
7
Level 1
Should Bootstrap (popper, jquery, fullcalendar) and React files stay together in app.js or we should seperate it?
Dear Good People,
We hope you have a good day.
Today I am learning to use Laravel + React, and we use Laravel Mix for the asset management.
We use Metronic theme for the styling, there are so many plugins, such as FullCalendar, Popper, Lodash, Axios, etc.
When i check the default app.js, Bootstrap and React component already there.
My question is, should we merge it in 1 app.js (an app.css of course), or we should seperate it like React have their own component app.js file and plain javascript have their own js file.
Or is there another way? Please tell us :D
Thank you
Level 1
Aahh i see, my friend said this one too. Will it cause slow loading if we load all in one file?
How about the React file? We have a lot of files, should we write it directly to the webpack, or should we make one JS file to collect all React (require everything inside it) file then write it to webpack then add it to the app.js?
Level 1
Will someone give their opinion?
Level 1
A single large file is no problem size-wise, in fact less files mean less requests for your clients so its good. The problem is if you do a lot of updates to this one js file you will force your clients to re-load the same js plugins again and again with every update.
The best practice here is to combine the plugins that will not change in one file, and your custom js in another file, only versioning (cache-busting) the custom js file so when you make any changes to your code only the custom file needs to be fetched again.
So to answer your react specific question - you can merge all the other libraries you're using with react in one file, and merge your custom js in another.
1 like
Level 1
Halo @denizar,
According to your answer, that's mean we should create 2 file in the Laravel Mix configuration right?
for example:
.scripts(
[
//files goes here
],
// output file goes here (custom static plugin)
)
.scripts(
[
],
// static plugin
);
is it true?
Level 13
The best thing to do is to extract your vendor files (your external dependencies, packages, things you don't actually change) into their own file (say, vendor.js) and keeping your javascript in a separate file. Laravel Mix makes this quite easy for you:
1 like
Level 1
@36864, Hola
Whoah, I don't even realize that. Sure i have to increase my read ability :v.
Thank you so much
Please or to participate in this conversation.