Как уменьшить размер скомпилированного vue с webpack?

Я использую 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 из компонент?
  • Вопрос задан
  • 1271 просмотр
Пригласить эксперта
Ответы на вопрос 2
CyberAP
@CyberAP
Фронтенд разработчик
Используйте vue.production.min.js вместо vue.min.js. Это сборка без компилятора шаблонов.

Избавиться от Vue во Vuex нельзя, он сильно на него завязан.

Так же настройте и убедитесь что у вас работает tree shaking. Инструкция есть на сайте вебпака. Проверить можно с помощью webpack bundle analyzer.
Ответ написан
Комментировать
Per_Ardua
@Per_Ardua
Frontend developer
У вас проблема с вебпак конфигом или конфликты плагинов, так как, видимо, размер увеличивается из-за неоднократного подключения модулей Vue. Он по идее должен подключать его единожды. Поставьте дефолтный конфиг и всё пересоберите, скорее всего поможет. В принципе, комментатор Станислав Лашманов , сказал всё что нужно
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы