防止特定的 .vue 组件被捆绑

Question

问题：在我的vue-cli 4 应用程序中，我希望有build: 脚本，它生成生产包，在某些情况下不包含特定的.vue-components。在其他情况下，它们应该被包括在内。此外，这些组件存储在应用程序本身 - 而不是外部库中。

我试过：动态导入.vue-components - 假设我有一个数组：

const customPreset = ['WidgetFirst', 'WidgetSecond', ...]

还有空对象：

const widgets = {}

所以我试着做这样的事情：

customPreset.forEach(v => { Object.assign(widgets, { [v]: () => import('./' + v + '.vue') }) })
export default widgets

将customPreset 更改为其他数组将允许导入另一组组件...

但这不起作用，因为import() 不能对表达式进行操作。

那么，在各种情况下如何将各种.vue-components 包含到生产包中？也许可以通过调整vue.config.js来实现？

Answer 1

您正在寻找的是lazy loaded components。在 Vue 中，它们可以在多个点上使用。

1. 在vue-router - 您可以为每个路由导入组件，仅在需要时加载：

这是如何定义一个将被 webpack 自动代码拆分的异步组件：

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

您还可以将组件分组到同一块中：

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')

1. 第二个选项是Dynamic/Async components，可以像这样在.vue文件中使用：

Vue.component(
  'async-webpack-example',
  // The `import` function returns a Promise.
  () => import('./my-async-component')
)

它甚至支持加载状态，直接从盒子里：

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})