Решение для слишком большого файла vendor.js после упаковки vue

Vue.js

После того, как проект vue будет упакован, будет сгенерирован файл .map, а файл .map также довольно большой.Функция файла карты состоит в том, чтобы помочь вам сопоставить неправильное местоположение, когда сообщается об ошибке, какая строка файла code находится внутри. Вообще этот файл бесполезен, поэтому файл .map нельзя генерировать при упаковке, он должен быть в файле config/index.js:

Просто установите для свойства productionSourceMap значение false.


Первый шаг, cdn вводит различные пакеты

index.htmlcdnСпособ внедрения vue, vuex, axios, element-ui, vue-router и других пакетов, как показано ниже:


Второй шаг — закомментировать import import, где используются такие пакеты, как vue.

Закомментируйте импортированный vue и другие пакеты, в которых используется vue, но Vue.use(axios), Vue.use(VueRoter), Vue.use(vuex) и т. д. все еще используются, за исключением Vue.use(ElementUI), если вы добавляете В этом предложении element-ui по-прежнему будет упакован в файл vendor.js

в main.js


index.js в файле хранилища плюс


в файле api/request.js


в файле router/index.js


Третий шаг, упаковка игнорирует такие пакеты, как vue

в webpack.base.conf.js



Четвертый шаг, если упакованный файл все еще относительно велик, используйте метод ленивой загрузки маршрута для загрузки маршрута.


окончательный результат упаковки

Размер vendor.js уменьшен с 988k до 235k