Как сделать динамический импорт библиотеки внутри метода в vue?

Question

[origami1024]

На фронте библиотеку по генерации PDF хочется грузить только уже по нажатию кнопки "сгенерировать PDF" - загрузить либу и запустить генерацию.

Гуглится динамический импорт компонентов, но не библиотек.

Возможно ли что-то типа такого внутри метода vue:

methods: {
        generatePDF() {
            const html2pdfd = () => import ("html2pdf" /*webpackChunkName:"html2Pdf"*/)
            html2pdfd()
        },
        ...
}

Answer 1

[Aetae]

Возможно. Ты сам написал как. Дальше обычная асинхронность, к Vue или сборщикам отношения не имеет.

spoiler

methods: {
        async generatePDF() {
            const html2pdfd = await import("html2pdf" /*webpackChunkName:"html2Pdf"*/);
            html2pdfd()
        },
        ...
}

или

methods: {
        generatePDF() {
            import("html2pdf" /*webpackChunkName:"html2Pdf"*/).than(html2pdfd => {
                html2pdfd()
            })
        },
        ...
}

Comments

[origami1024]

В первом варианте вебпак почему-то ругается на слово import, что это Unexpected token
Во втором варианте ошибка от вебпака такая: 'import' and 'export' may only appear at the top level

[Aetae]

origami1024, не вэбпак.

[origami1024]

Aetae, хмм, походу нужно сконфигрурировать babel-loader?
ERROR in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/js/components/FilterAndShare.vue
Module build failed: SyntaxError: D:/x/resources/js/components/FilterAndShare.vue: 'import' and 'export' may only appear at the top level (144:12)

[origami1024]

Проблема в сборщике(laravel-mix@1.7.2), либо его конфиге, так в итоге заработало, может кому-то пригодится:

async generatePDF() {
            const html2pdfd = await System.import("html2pdf.js" /*webpackChunkName:"html2Pdf"*/);
            html2pdfd()
        },

[Aetae]

origami1024, System.import это сторонний загрузчик. Если вебпаковский import() почему-то не работает - попробуйте классику:

methods: {
    generatePDF() {
      require.ensure([], function() {
        let html2pdfd = require("html2pdfd");
        html2pdfd()
      }, "html2pdfd");
    }
  }

[origami1024]

Aetae, да что-то и так тоже не кэшируется, смотрю в devtools в network, в столбце size - там пишется какие файлы из memory загрузились, какие нет.

Что можно сделать не понятно, версия сборщика какая-то странная выходит, сами js файлы скачиваются, но по загрузке ошибка в консоли
Uncaught (in promise) Error: Loading chunk 0 failed at HTMLScriptElement.onScriptComplete

Ну вроде всё равно должно кэшироваться - содержимое скачанного js файла на превью в network соответствует действительному

Answer 2

[Alex]

Должно работать так же как с компонентами:

async generatePDF() {
            const html2pdfd = await import('html2pdf')
            console.log({ html2pdfd }) // <-- то, что экспортируется в "html2pdf"
        }

Если не работает -- копайте в сторону настроек сборщика.

Answer 3

[Владимир Коротенко]

Человек зашёл на страницу, значит ему это нужно. А компонент может бить по страницам. В чем проблема?

Comments

[origami1024]

А если робот или другой организм? Им pdf-ка может и не пондобиться

[origami1024]

Аргументы против того чтоб это делать конечно есть. Но можно ли это сделать?

[Владимир Коротенко]

origami1024, а робота вы отсекайте или говорите ему куда идти.

[Alex]

Я согласен с автором. Хватает кейсов когда это необходимо. Скажем, компонент который отображает какой-то отчет. И в нем есть возможность скачать ПДФ. А кроме этого, отправить его по емайл, распечатать, добавить в закладки и что-то ещё.
Не каждому пользователю может понадобится ПДФ. Так, что вынести эту логику в отдельный файл и загружать по запросу -- вполне разумно.

[Владимир Коротенко]

Alex, Я кстати могу и ошибаться, но реально искал где в дефолтном конфиге отключить разделение на чанки и получить 1 файл. Это в общем то было требование проекта.