app.js and app.css file sizes

Yes of course, the more packages you require the larger the file size. When you cdn you don't actually store the code locally, but the end-user will still make a request to the cdn to get the required script. It's actually worse in some cases, for example if you have many scripts and css files, then all those requests will slow down the page load. You can use some tricks to control the file sizes, such as some clever plugins which will remove all unused css rules from your app.css, reduce JS sizes etc.

Basically: just use what you need and nothing more. If you don't need lodash and vue and jquery just remove them from the bootstrap and app.js files.

Yes but in this case, we are comparing clean file from CDN vs clean file from the Laravel mix and it is three times larger. Same package or packages! What does mix adding that makes that difference?

There is a lot going on with webpack in the backend that will impact file sizes. What I would do is extract your code from the vendor libraries. If your using mix then follow this

mix.js('resources/js/app.js', 'public/js')
   .extract(['vue'])

https://laravel.com/docs/5.7/mix#vendor-extraction

It will ensure you cache your vendor libs client side

That is a good solution! Thanks.

By the way, in this case, it is good to use CDN. I know some people don't like CDN but in terms of client caching it is really much better as 90% of the people will already have jquery cached from CDN. and don't need to load it from your server.

What baffles me still is what exactly added by webpack that makes the files three times in size...

@yshaool - I wouldt think about a cdn unless you need it. If your user has to download your vendor libraries once the first time the load your page then so be it. If it doesn't work for your user base then you need to re-evaluate .

To answer the side question.

What baffles me still is what exactly added by webpack that makes the files three times in size...

You are entering a rabbit hole here involving advanced JavaScript that pretty much Kyle Simpson knows

https://github.com/getify/You-Dont-Know-JS

Epic books but very difficult stuff, tree shaking for example . If you want to reduce your bundle size look at to your 3rd party libraries, minimize what you imports and look for modules that work nicely with webpack... moment.js I'm looking at you here

I certainly don't want to jump into that rabbit hole :) and most likely have no knowledge, time or skill to do so.

Still having such big files in a world where the page load time is a significant UI issue that will affect the web application success in so many ways (fewer sales for examples in an e-commerce shop, lower SEO rating and so on...).

Wish Kyle Simpson would consider that :)

@yshaool - just for reference Kyle Simpson is a JavaScript guru and not the source of your issue.

You need to look at the the libraries your using and see if you can streamline them, either by using alternate packages or importing only what you need.

Moment.js can add a huge amount to you bundle... try instead

https://github.com/iamkun/dayjs

Lazy dev = big bundle :-)

Moment.js can add a huge amount to you bundle... try instead https://github.com/iamkun/dayjs

@D9705996 Unless your app needs timezone support, which is probably most. I take your point but that probably isn't the best example as it isn't an apples to apples comparison. Timezone functions are the bulk of moment.js code.

@yshaool When you change the environment to production and run npm run production it reduces the size greatly. For dev, webpack adds a lot of stuff to make debugging easier.

@Cronix The tests made on the original post are on clean Laravel comparing CDN files package to the NPM run production outputs (without moment.js)