减少 Vue Bundle 大小，提高 Vue 性能答案

【问题标题】：Reduce Vue Bundle Size, and increase Vue Performance减少 Vue Bundle 大小，提高 Vue 性能
【发布时间】：2021-01-06 08:56:52
【问题描述】：

vue 在初始加载时间和大小方面的性能存在很大问题，下图显示 vue-plotly 是主要因素。但是，我没有使用 vue-plotly 包，而是我的 vue-pivottable(Pivot Table Component) 使用它。

我曾尝试在我的路线和视图页面上动态加载。例如：const PivotTable = () => import('@/components/PivotTable') 但结果还是一样。

我怎样才能防止这个包从初始加载。提前致谢。

【问题讨论】：

【解决方案1】：

您可以使用 webpack 的代码拆分和延迟加载功能。

可能很简单

const PivotTable = () => import(/* webpackChunkName: "pivot-table" */  '@/components/PivotTable')

虽然它可能会变得有点复杂，因为您可能需要处理数据透视表是异步加载的事实。

有几种方法可以做到这一点，最简单的是将它与使用它的组件捆绑在一起。

为此，您需要将组件导入到具有与数据透视表匹配的 webchunk 名称的父级中

SomeFooParent.vue

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

Foo.vue

const PivotTable = () => import(/* webpackChunkName: "group-foo" */  '@/components/PivotTable')

这样整个组件都在同一个包中，只要该组件在初始加载时不存在，它就不会在启动时加载，并且整个组件，具有 pivotTable 依赖项，将按需加载。

或者，您可以将数据透视表作为未解决的承诺进行处理，并在使用前等待加载。请参阅example webpack 建议如何在按钮单击时处理延迟加载块。

【讨论】：