compile css and js

hey everybody, for my front end I download template adds I copy CSS and js code to my public folder. then I access it as {{asset()}}.

my question is what is the best way to better performance (page-load). and how to use can for my template css and js.

//instead of just copy my CSS and js and compressed, I prefer using laravel mix like this

mix.js('resources/js/app.js', 'public/js')
	js('resources/js/jquery-3.3.1.min.js', 'public/js')
	js('resources/js/jquery-ui.js')
	js('resources/js/popper.min.js', 'public/js')
	js('resources/js/aos.js', 'public/js')

 .sass('resources/sass/app.scss', 'public/css')
   .sass('resources/sass/bootstrap.min.css', 'public/css')
   .sass('resources/sass/magnific-popup.css', 'public/css')

most of css and js code are static, so how can I use cdn for template driven css and js.

thanks in advance

ahmeddabak

6 years ago

Level 47

You should check which libraries your template is using, and which version for each library. then install them using npm. then in your app.js, and app.scss import the scripts and styles for the libraries.

Aronaman

6 years ago

Level 2

@ahmeddabak instade of npm i used copy all css, js, image, plugin to public and test it its working, but i think it has disadvantage on fastloading right? if ur ans yes that mean i have to remove all and install via npm and import to my app.js and scss ?

ahmeddabak

6 years ago

Best Answer

Level 47

Yes, for each css or js file you are making a new request to the server, the server has to find the file and send a response. it is better if you bundle your assets in one file.

Aronaman

6 years ago

Level 2

@ahmeddabak ok After i finish compile , sould i extract it ?

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css')
   .extract(['jquery', 'lodash']);

and how to I pull it view ? using cdn ?

ahmeddabak

6 years ago

Level 47

Normally you do not need to extract jquery, there are some cases where this necessary like when you need to load a library after jquery but before some code in app.js is executed. but you can always import that library in app.js to resolve the problem.

to import it in the view use <script src="{{ asset('js/app.js') }}"></script> and <link rel="stylesheet" href="{{ asset('css/app.css') }}">

Please or to participate in this conversation.