Как я могу правильно лениво загрузить файл json в Vue.js, чтобы уменьшить размер пакета?

Во-первых, не используйте библиотеку vue-lottie. Если вы посмотрите на исходный код, то главное и единственное, что должно быть в этой библиотеке, это компонент src/lottie.vue (+ его зависимость lottie-web), но по какой-то причине пакет NPM также содержит полное демонстрационное приложение, включая демо-файл JSON (src/assets/pinjump.json)

Если вы посмотрите на компонент lottie.vue, то увидите, что это очень маленькая и очень простая оболочка для lottie-web, которая обеспечивает основные функции. Избавившись от vue-lottie, вы получите следующие преимущества:

1. vue-lottie полностью игнорирует одну из lottie-web опций, которая использует path вместо animationData - документация здесь не очень ясна, но я предполагаю, что, предоставив path, библиотека попытается загрузить данные анимации ad-hoc, поэтому вам не нужно включать их в ваш пакет. Имхо стоит попробовать...

2. Загрузка данных анимации по запросу

   • why are you using dynamic import on JSON file instead of dynamically importing whole component ? By making separate chunk on component level, dynamic chunk will include not only your json data but also lottie-web which is also not small. And Vue will handle loading of the component without any additional code changes...
   • если вы по-прежнему хотите загружать по запросу только ваши данные JSON, вы должны понимать, что динамический импорт Webpack (import(".....")) возвращает Promise, а lottie-web (и, в свою очередь, vue-lottie) ожидает объект. Итак, вы должны сделать что-то вроде этого:

<script>
    import lottie from 'lottie-web';

    const animationData = () =>
       import("/users/username/documents/projectname/public/data/filename.json");

    export default {
      mounted () {
        animationData().then(function(data) {
          this.anim = lottie.loadAnimation({
            // other options 
            animationData: data
          })
        });
      }
    }
</script>

Обновлять

Вы всегда должны быть очень осторожны при добавлении сторонних компонентов в свой проект. Еще одна вещь, которую я заметил, это то, что lottie-web имеет метод destroy() в своем API. Это указывает на то, что он создает некоторые ресурсы (возможно, элементы DOM), которые необходимо очистить. Это то, с чем компонент vue-lottie вообще не справляется и может привести к неприятным утечкам памяти в вашем приложении. Вы можете прочитать о проблеме здесь

Когда установлено свойство animationData, это функция, поэтому строка:

Ожидаемый объект, полученная функция

Ему нужен объект, а не функция.
Функция:

const animationData = () =>
  import("/users/username/documents/projectname/public/data/filename.json");

При определении свойства animationData вам необходимо установить объект в качестве его значения. Затем при монтировании fetch данных (или используйте Axios, если хотите) обновить свойство animationData компонента.

Примечание. Я никогда не пользовался Vue, поэтому надеюсь, что то, что я говорю, верно.

export default {
    name: 'animation',
    components: {
        vueLottie
    },
    data () {
        return {
           speed: 1,
           animationData: {}
        }
    },
    computed: {
        lottie () {
            return this.$refs.lottie
        }
    },
    mounted() {
        fetch('/users/username/documents/projectname/public/data/filename.json')
            .then(response => response.json())
            .then(json => this.animationData = json;);
        )
    }
}