How to dynamically load components without using vue-router?

Question

Vue.js

Tell me if I have a project without vue-router (not SPA). Assembled in Webpack.
And it seems that the project itself is small, but the final js file is going to be decent. It turns out that everything has been compiled into one JS, and since pages are loaded with a reload, it loads it every time.

When using vue-router on projects, somehow I didn’t think about it, the components there were loaded dynamically depending on the route. And now it turns out I'm loading one page, but all the JS is loaded on each page with all the components that, in fact, I don't need.

Please tell me how to organize it.

Answer 1

Loading components does not depend on vue-router, but depends on how you connect them.

components: {
  some: () => import('@/components/some.vue')
}

or

Vue.component('some', () => import('@/components/some.vue'));

And the some component will only be loaded when needed.
Well, the whole bundle - it is cached, nothing else is reloaded when the pages are reloaded. From the point of view of the responsiveness of the interface, it is just more profitable when everything is loaded immediately, and then lies in the cache. It’s worth splitting if the bundle is too fat and the initial load affects UX and / or if the application has a lot of pieces that can, in principle, not be used in certain behavioral scenarios.