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

Posted 2023-02-23

【中文标题】防止特定的 .vue 组件被捆绑

【英文标题】：Prevent specific .vue components from being bundled

【发布时间】：2020-07-13 22:08:00

【问题描述】：

问题：在我的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来实现？

【参考方案1】：

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

在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')

第二个选项是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
)

【讨论】：

感谢您的回答！不幸的是，这对我不起作用。我正在使用第二个选项，因为项目中没有路由器。在本地开发中，这种方法效果很好，但是当我使用 webpackBundleAnalyzer 探索我的生产包内容时（在 npm run build 之后） - 我仍然看到所有组件，包括那些不应该包含的组件。如果在 src 代码中遇到 import 声明，甚至看起来 webpack 会将 .vue 组件放入生产包中。

您是否尝试在组件中也添加 /* webpackChunkName: "group-foo" */？

我正在像这样导入组件： Widget: () => import(/* webpackChunkName: "Widget" */ './Widget.vue') 即使我尝试有条件地导入它 -它以某种方式被包含在生产包中......

好吧，你会在一个捆绑分析器中看到所有组件，它们只是没有一起加载。但它们存在于包中的不同文件中。喜欢 chunk.0.js

知道了，那么您可能需要转向不同的 webpack 配置..