[Vuejs]-Vue dynamic import is being imported even if it is never used

by

0👍

Dynamic components in Webpack (and in general) work because bundler at build time prepares js files (with component code) which are at runtime loaded (or not …depending on logic) by the app. Bundler can not execute your code and evaluate the logic which decides which component should be loaded. It must prepare the budle for all possible outcomes.

So yes, of course your bundler looks for and bundle all the files even they are used in dynamic import.

I do not know exactly how to set up Rollup correctly but I’m pretty sure you don’t want to include any Vuetify/Quasar code as part of your library. Such code would be duplicate and possibly from different version of the framework the user of your library is already using! So instead of using string configuration (framework: 'vuetify'), leave it to your users to pass the component mapping (and maybe add sample to your docs)…

// dynamic
Vue.use(ScanField, { components: {
    scan_text_field: () => import('quasar/src/components/input/QInput'),
    scan_textarea: () => import('quasar/src/components/input/QInput'),
    scan_checkbox: () => import('quasar/src/components/checkbox/QCheckbox'),
    scan_select: () => import('quasar/src/components/select/QSelect'),
    scan_date: () => null
}})

// static
import QInput from 'quasar/src/components/input/QInput'

Vue.use(ScanField, { components: {
    scan_text_field: QInput,
    ...  
}})

Alternative solution is to use normal (not dynamic) imports, but configure Rollup so that both Vuetify and Quasar are treated as peerDependencies (dependency your lib requires but the user is responsible to add/install it into his project) – see the docs

Leave a comment