What is the best way to implement SPA?

Question

JavaScript

Hello, I tried to develop on vue-cli with all ready-made batteries on webpack.v.1 and the usual custom one from scratch on webpack.v.3. It’s more convenient, of course, on vue-cli, but I don’t like that after assembly, everything is broken into separate css, js. And at the same time, the browser, in particular chrome, sees all my internal components of the project. And this is a bit of an embarrassment. It seems that everything is minified and the aglifay built into vue-cli does its job. But the browser parses everything and understands everything. And with webpack3, one single bundle.js is generated, which I include in the project. In this case, everything works fine. But the question arose about performance. There will come a time when my bundle.js will weigh a lot, and making the browser wait for a full load is bad. Or am I exaggerating? What's better? Thank you!

Answer 1

Delete .js.map files. These are sourcemaps from webpack))
The fact is that a month ago I added an additional loader to vue-loader.conf.js. And commented out the sourcemap condition. Namely, like this:
ha ha. I just didn't know how to organize it together)) It's funny, isn't it?
So here is the solution:

Answer 2

The latest vue-clie on webpack 2.x supports code splitting out of the box. The output is vendor.js (libraries from node_modules), app.js. Also look towards lazy loading components. That is, you can modals, for example, or not load other components at all if there is no need. That is, you broadcast the v-if directive to the modal and connect the component like this:

components: {
  Modal: () => import('components/modal.vue');
}

In this case, the output component will be in a separate file and will not be loaded until v-if completes.
If without v-if, then the component will be loaded asynchronously during page load.
For example, I load pages like this through vue-router, asynchronously.

Answer 3

Weighing a lot is a rather subjective concept. In addition, do not forget that there is such a thing as a cache. I split the code into two bundles: one contains my code, the other contains the code of third-party libraries. The point is that third-party libs are rarely updated, the browser will cache this bundle on the first load and will only load my code, which is updated often, but weighs little.