What is the best practice for including external dependencies in Webpack?

Question

Frontend

A project compiled for the client side via Babel and built via Webpack has several dependencies such as three.js, d3.js, vue.js
As far as I know, there are only two options:
1. Include the necessary modules via import
+ it is precisely indicated that and where it is used
- all imported dependencies are built into the bundle, which leads to an increase in build time and the size of the final package
- not all libraries can support this method of connection
2. Include them directly in html
+ dependencies can be loaded from cdn and cached on the client, regardless of changes in the application itself
- old-school methods of connecting packages are needed
I didn’t find any beautiful methods in Webpack on how to connect external dependencies, so the only way is:
1. connect the library in html
2. specify externals in config
How do you usually connect dependencies and what is better to use in the application, taking into account its growth?

Answer 1

Bad search:
Split add and vendor code

This will remove all modules in the vendor chunk from the app chunk. The bundle.js will now contain just your app code, without any of its dependencies. These are in vendor.bundle.js.