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

Question

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

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。

Answer 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)

Answer 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/

Answer 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