Using Vue without bundlers?

Question

I am creating some experimental web sites that are using JavaScript without bundling. For dependency management I have used RequireJS until now, but I have started to use SystemJS recently since it has some very nice support for HTTP2. I have done some experiments so far on my custom set web server and results are great for the web sites I am creating. For example, first page render happens around 400ms, full page load at 800ms etc.

I am doing this because I want to take full advantage of HTTP2 and I want to lazy load only scripts that I am using at a certain moment. Code like that is easier to maintain, it’s cached better etc. At the moment there is a total craze about bundlers like Webpack, but that is not something I want to use.

Here is the question: is there a way to compile single Vue file / components by using Gulp and then load them with SystemJS as AMD or CommonJS modules?

edit:

This is what I want to achieve with SystemJS and Vue:

entry point JS file:

// SystemJS config
SystemJS.config({
  /* ... */
  
  baseURL: './',
  map: {
    // App
    'app': 'scripts/app.min.js',
  
    // Utils
    'axios': 'scripts/vendor/axios/axios.min.js',
    'modernizr': 'scripts/vendor/modernizr/modernizr.min.js',    
  
    // Framework
    'vue': 'scripts/vendor/vue/vue.min.js',
    
    // Components
    'vueHelloWorld': 'scripts/components/hello/vueHelloWorld.js', // <- Compiled VUE component
    'vueMenu': 'scripts/components/menu/vueMenu.js'
  },
  depcache: {
    'vueHelloWorld': ['vue'],
    'vueMenu': ['vue', 'vueHelloWorld']
  }
  
  /* ... */
)};

// Initially Load default scripts
require(['modernizr', 'axios', 'app']);

Vue components vueHelloWorld.js and vueMenu.js are end result, compiled into pure JS from single file templates vueHelloWorld.vue and vueMenu.vue.

After that initial file, app.min.js is loaded and it will have declarations to load rendered vue components.

This is what I don't know how to do - how to render separate files for each Vue component that I want to load in this manner?

Answer 1

If I understand the question correctly, all you are looking for is something that takes a single *.vue file and returns a single compiled *.js file. You could either try and write your own thing using https://github.com/vuejs/vue-component-compiler, or what I ended up doing is misusing rollup as my vue compiler, configuring it, so that it ignores all dependencies and therefore takes one vue component in and only compiles that one component. Here you can see the config that achieves that: https://github.com/ecosia/bazel_rules_nodejs_contrib/blob/master/internal/vue_component/rollup.config.js

Answer 2

It seems that Async components and webpacks code splitting are what you are looking for.

Here you find an article about using them:

https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/