How to include a vue component only when required in spa?

Question

I have made components and saved into different '.vue' files and compiling them with the help of elixir / gulp and of course browserify.

I am including all the components into one js file,

I want to know that how to reduce the size of "build.js" file that is called each time in every page that contains all the components of the app.

It would be helpful to know such a way to include components only when they required.

This question is not related to Vue-router

I am new to vue.js

Answer 1

Here is your answer: http://router.vuejs.org/en/lazy.html

This is supported natively in Webpack. The example is:

require(['./MyComponent.vue'], function (MyComponent) {
  // code here runs after MyComponent.vue is asynchronously loaded.
})

If you want to do it with Broswerify, you'll need https://github.com/substack/browserify-handbook/blob/master/readme.markdown#partition-bundle . The code looks like:

router.map({
  '/async': {
    component: function (resolve) {
      loadjs(['./MyComponent.vue'], resolve)
    }
  }
})