C
C
cinet2018-11-13 03:11:35
symfony
cinet, 2018-11-13 03:11:35

How to reduce compiled vue size with webpack?

I am using symfony with encore (webpack)
app.js file:

import Vue from 'vue';
new Vue({
    el: '#applang',
})

The file size after compilation in production is 91Kb (using the .addAliases({ vue: vue/dist/vue.min.js', })) option in webpack.config.js reduces by only 1Kb )
If you remove the line import Vue from ' vue'; then the size after compilation is 8Kb.
At the same time, the size of the entire vue.min.js is 30Kb
I do not fully understand how webpack and vue work, and therefore the questions arise:
1. What does webpack do with the import Vue from 'vue' line? If it "inserts" the entire vue, then why does the size grow by 80Kb, and not by 30Kb, and why does it still need to be connected to the page (otherwise the application stops working)?
2. Above is the simplest application example. It will work without import. But in reality the application looks something like this:
import Vue from 'vue'; 
import search from './components/search/Search'; 
import store from './store'; 
...
new Vue({
    el: '#appvue',
    store,
    components : {search},
  ...
}).$mount('#appvue');

store.js file:
import Vue from 'vue'
import Vuex from 'vuex'
import search from  './modules/search';

Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
export default new Vuex.Store({
  modules: {
      search,
  },
  strict: debug,
})

If you comment out the line import Vue from 'vue', then this.$store becomes undefined in the components.
How not to insert the line import Vue from 'vue' and still access the store from the component?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
S
Stanislav Lashmanov, 2018-11-16
@CyberAP

Use vue.production.min.js instead of vue.min.js. This is an assembly without a template compiler.
It is impossible to get rid of Vue in Vuex, it is strongly tied to it.
Also set up and make sure that tree shaking works for you. Instructions are available on the webpack site. You can check it with the webpack bundle analyzer.

P
Pavel Kokovin, 2019-08-04
@Per_Ardua

You have a problem with your webpack config or plugin conflicts, as it seems that the size increases due to the repeated inclusion of Vue modules. In theory, he should connect it once. Put the default config and rebuild everything, most likely it will help. In principle, commentator Stanislav Lashmanov , said everything that is needed

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question