ElementUi: Individual components have same size as full bundle?

311 Views Asked by At

I want to use some handpicked components from ElementUi instead of the full bundle.

I am using laravel-mix to compile and minify my bundles.

It seems that it does not matter if I only register 2 components or the complete bundle in my App.vue, because

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(Button)
Vue.use(Select)

const app = new Vue({
    el: '#app'
});

and

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  el: '#app'
});

both end up to be compiled into app.js of size 687kb. Why is that?

This is my webpack.mix.js configuration:

const mix = require('laravel-mix');

mix.webpackConfig({
   externals: {
    vue: 'Vue'
  }
});

mix.options({
  extractVueStyles: 'public/css/components.css',
  purifyCss: true,
});

mix.js('resources/assets/js/app.js', 'public/js')

If I try the same with Buefy as explained here then the bundle size has a big difference, table + input is only 50kb while the full bundle is 222kb.

0

There are 0 best solutions below