stevenobird
233
2
Mix

Elixir + Vue[ify] -> Lots of single files take too much space

Posted 3 years ago by stevenobird

Hey guys, I have a question about Elixir and Vue[ify].

I am using vueify to compile multiple components with some dependencies into ready-to-use JavaScript files.

A Vue js file can look like this:

account-purchaselog.js

var Vue = require('vue');
var VueResource = require('vue-resource');
Vue.use(VueResource);

import Vuetable from 'vuetable/src/components/Vuetable.vue';
import VuetablePagination from 'vuetable/src/components/VuetablePagination.vue';
import VuetablePaginationBootstrap from 'vuetable/src/components/VuetablePaginationBootstrap.vue';

In my gulpfile.js I compile it down with

mix.browserify('account-purchaselog.js');

(along with some more files).

Everything is working fine here. But the problem is: Every single compiled js file takes too much space, because every of them pulls in the same dependencies.

Do you have any ideas how to compile down EVERYTHING (all dependencies and vue javscript files with components) into one single file? I have already tried it with mix.babel(), but I get the following error:

 Babel Compilation Failed!: G:/blabla/Web/resources/assets/js/all.js: Duplicate declaration "Vuetable"

This seems to happen because I pull in Vuetable components in 3 or 4 JS files.

I had one idea where I save all compiled .js files into a seperate directory and merge them with mix.scripts(), but that feels somewhat wrong.

Thanks in advance!

Please sign in or create an account to participate in this conversation.