异步加载 Vue 组件以减小 chunk 体积-工具盒子

问题 {#问题}

当你的组件过于复杂时，这里指它引用了非常多的第三方库，那么当你打包的时候或许会碰到下面的警告：

|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 | (!) Some chunks are larger than 500 KiB after minification. Consider: - Using dynamic import() to code-split the application - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/guide/en/#outputmanualchunks - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit. |

当然一个最简单的方法，就是按照它提示的最后一行，编辑 vite.config.ts：

|---------------------|------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | export default defineConfig({ // ... build: { chunkSizeWarningLimit: 1500, }, }) |

但是，既然我写了这篇文章，就证明我没有直接忽略这个警告。警告竟然得到了尊重，泪目了。

方案 {#方案}

对一些比较重的组件，尤其是需要我们从后端获取数据后才显示的组件 ，用一层 defineAsyncComponent 套起来，如下：

|-----------|--------------------------------------------------------------------------| | 1 | const AsyncFoo = defineAsyncComponent(() => import('./Foo.vue')) |

之后再模板里直接当成 Foo 组件用就可以了：

|-----------------|--------------------------------------------------| | 1 2 3 4 | <AsyncFoo :prop1="val1" :prop2="val2" /> |

这是在 Vue 官网上专门介绍的用法，点此前往。

当然，这个不能操之过急，只要拆分几个主要的大组件即可。