Vue 动态导入即使从未使用过也会被导入

I am building a vue plugin called vue-scan-field. At the previous version (0.1.2) the plugin only supported vuetify. Now I want to also add quasar to this plugin. So what I have decided to do is use dynamic imports for the components. For example the quasar file looks like this:export default { 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') }, ...}And I also have this for vuetify:export default { components: { scan_text_field: () => import('vuetify/lib/components/VTextField'), scan_textarea: () => import('vuetify/lib/components/VTextarea'), scan_checkbox: () => import('vuetify/lib/components/VCheckbox/VCheckbox'), scan_select: () => import('vuetify/lib/components/VAutocomplete'), }, ...}Now download the module from npm and run my quasar project I get these errors:These dependencies were not found:* vuetify/lib/components in ./node_modules/vue-scan-field/dist/vue-scan-field.esm.js* vuetify/lib/components/VAutocomplete in ./node_modules/vue-scan-field/dist/vue-scan-field.esm.js* vuetify/lib/components/VCheckbox/VCheckbox in ./node_modules/vue-scan-field/dist/vue-scan-field.esm.js* vuetify/lib/components/VTextField in ./node_modules/vue-scan-field/dist/vue-scan-field.esm.js* vuetify/lib/components/VTextarea in ./node_modules/vue-scan-field/dist/vue-scan-field.esm.jsNow this can be because maybe my compiler imports the components on build. I don't know if I can safely disable this function (I don't think so). Is there any way to fix this?NPM Package: https://www.npmjs.com/package/vue-scan-fieldGithub page: https://github.com/jessielaf/vue-scan-field 解决方案 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)...// dynamicVue.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}})// staticimport 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 这篇关于Vue 动态导入即使从未使用过也会被导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！