如何在 VueJs 中添加动态/异步/惰性组件

Posted 2023-02-23

【中文标题】如何在 VueJs 中添加动态/异步/惰性组件

【英文标题】：How to add dynamic/async/lazy components in VueJs

【发布时间】：2018-02-10 03:12:34

【问题描述】：

我想根据某些条件在父组件中动态添加子组件。 我想出了以下伪代码

If currentView == 'a'
    load component A1
    load component A2
ElseIf currentView == 'b'
    load component B2
    load component B3

我知道我们可以在父组件中注册所有组件，例如：

Vue.component('a1-component', require('./A1Component.vue'));
Vue.component('a2-component', require('./A2Component.vue'));

但是我有很多这样的子组件，我只需要在需要时加载所需的组件。因此，最初加载所有组件是一种开销。

我在 Vue Js 中尝试过 Dynamic components 和 async-components。所有动态组件都完全加载，所以它不是我想要的。我不确定如何使用异步组件来实现这一点。

我正在使用 Laravel 5.4、VueJs 2.3.3 和 Webpack。

【参考方案1】：

安装所需的 babel 插件：

npm install --save-dev babel-plugin-syntax-dynamic-import

在您的项目根目录中创建 .babelrc，在文件中包含以下短代码：

    "plugins": ["syntax-dynamic-import"]

你可以用这种方式导入之后：

const Foo = () => import('./Foo.vue')

最后运行 npm build(vue-cli) 或 npm run watch(laravel)

【参考方案2】：

嘿，伙计，我在谷歌上搜索了差不多 4-5 个小时。

分裂没有像我预期的那样工作。使用 babel 预设 es2015，它在 DEV 服务器上工作得很好，当构建代码 uglifier 时出错。 在我建造它之后，它工作得很好。 我认为您不必告诉 webpack 拆分代码，当您使用正确的导入类型时，这一切都是自动的，那就是 const Foo = () => import('./Foo.vue') 类型

所有像这样完成的导入都会创建一个拆分点，如果您不希望它拆分，您必须在文档中采取额外的步骤 是的，但不是每个文件夹，而是每个文件 所以如果你有 5 个文件夹和 25 个文件，它将变成 25 个捆绑文件，在需要时自动加载

这肯定会有所帮助 - https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/

【讨论】：

你有什么例子吗？

您提供的网址提供了一些很好的见解:)

不，但我已经编辑了我的项目，但您可以通过我最终引用的这个链接获得帮助 - alligator.io/vuejs/vue-lazy-load-images

@ArvindBhardwaj 是 webpack 相关的延迟加载问题以及如何在 vue.js 中使用它

@ArvindBhardwaj 这也会有所帮助 - router.vuejs.org/en/advanced/lazy-loading.html

【参考方案3】：

你可以结合异步组件和动态导入来实现这个

Vue.component('foo', () => 
    if(currentView === 'a') 
      return import('./A1Component.vue')
     else 
      return import('./B2Component.vue')
    
)

要使用动态导入，您需要将 syntax-dynamic-import 插件添加到您的 Webpack

Babel 插件： https://babeljs.io/docs/plugins/syntax-dynamic-import/

Webpack 插件： https://github.com/airbnb/babel-plugin-dynamic-import-webpack

【讨论】：

你能告诉syntax-dynamic-import的网址吗？我找不到它..