I have big issue on vue performance on initial load time and size, picture below shown the vue-plotly is the main factor. However, I didn't use the vue-plotly package but my vue-pivottable(Pivot Table Component) using it.
I had try dynamic load on my route and view page.
eg: const PivotTable = () => import('@/components/PivotTable')
but result are still the same.
How could I prevent this package from initial load. Thanks in advance.
You can use code splitting and lazy loading feature of webpack.
May be as easy as
const PivotTable = () => import(/* webpackChunkName: "pivot-table" */ '@/components/PivotTable')
Though it may get a bit more complicated, since you may need to handle the fact PivotTable is loaded asynchronously.
There's couple ways to do that, the simplest is to bundle it with the component that uses it.
To do that you would import the component in a parent with webchunk name that matches the Pivot table
SomeFooParent.vue
const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
Foo.vue
const PivotTable = () => import(/* webpackChunkName: "group-foo" */ '@/components/PivotTable')
This way the entire component is in the same bundle, and as long as the component is not present on the initial load, it will not load on start and the entire component, with the pivotTable dependency, will load on demand.
Alternatively, you could dive into handling the PivotTable as unresolved promise and await loading before using it. See example how webpack recommends handling lazy loading a chunk on button click.
