Я использую symfony с encore (webpack)
файл app.js:
import Vue from 'vue';
new Vue({
el: '#applang',
})
Размер файла после компиляции в production 91 Кб (использование опции .addAliases({ vue: vue/dist/vue.min.js', })) в webpack.config.js уменьшает всего лишь на 1Кб )
Если удалить строку import Vue from 'vue'; то размер после компиляции 8Кб.
При этом размер всего vue.min.js составляет 30Кб
Я не до конца понимаю как работает webpack и vue и поэтому возникают вопросы:
1. Что делает webpack со строкой import Vue from 'vue'? Если он "вставляет" весь vue то почему развмер вырастает на 80Кб, а не на 30Кб и почему все равно надо подключать на страницу (а иначе приложение перестает работать) ?
2. Выше приведен самый просто пример приложения. Оно будет работать и без import. Но на самом деле приложение выглядит примерно так:
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:
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,
})
Если закоментировать строку import Vue from 'vue', то в компонентах this.$store становится undefined.
Как не вставлять строку import Vue from 'vue' и все таки получить доступ к store из компонент?
Средний
