Using Vue without bundlers?

6
votes

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?

3
javascriptvue.jsgulpvuejs2vue-component
I think the systemjs-builder will be of interest to you. Another thing to look into would be to have your transpiler output anonymous register modules for each source module. – Aluan Haddad
I want to avoid bundling and secondly I want to render each vue component into a separate file that can be loaded (required) as needed. – Vladimir Jovanović
Transpiling to anonymous register modules would enable that. Am I correct that you want to compile but not to bundle? – Aluan Haddad
I have extended my question, is it clearer now? – Vladimir Jovanović
this article describes an approach, but not sure how well it fits with the rest of your structure: medium.com/@jamesweee/… – explunit

3 Answers

2
votes

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

1
votes

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/

0
votes

No, because single Vue file (*.vue) can only be recognized by vue-loader through webpack, SystemJS or AMD or CommonJS are totally unrelated to it, these three are modularity standards or ways to make your javascipts files organized.

Also u can write in this way.

a.component.js

var ComponentA = {
    template: '#view-a',
}

b.component.js

var ComponentB = {
    template: '#view-b',
}

then in your html file

<script type="text/x-template" id="view-a">
    <div> .... </div>
</script>

<script type="text/x-template" id="view-b">
    <div> .... </div>
</script>